• 一、【VUE-CLI】Vue CLI 脚手架介绍及安装

    一、Vue CLI 脚手架介绍及安装

    1、初始化脚手架

    1、说明

    1. Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
    2. 官网

    2、具体步骤

    1. （仅第一次执行）全局安装@vue/cli

      1. npm install -g @vue/cli

        • 1

    2. 切换到要创建项目的目录，使用命令创建项目（xxx为项目名）

      1. vue create xxx

        • 1

    3. 启动项目

      1. npm run serve

        • 1

    备注：

    1. 如果出现下载缓慢，配置npm淘宝镜像（最好在进行第一步之前就跑这个命令）

      1. npm config set registry https://registry.npm.taobao.org

        • 1

    2. Vue脚手架隐藏了所有webpack相关配置，如果想查看webpack配置，可执行此命令

      1. vue inspect > output.js

        • 1

    3、运行效果图

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2、脚手架文件结构

    在这里插入图片描述

    3、主要文件分析

    1、main.js

    /*
  该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建Vue实例对象---vm
new Vue({
  // 将App组件放入容器中（可点代码块下方链接进入详解，此处不过多赘述）
  render: h => h(App),
}).$mount('#app') // el: '#app'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    看"render: h => h(App)"说明的点这里~

    2、index.html

    DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <title><%= htmlWebpackPlugin.options.title %>title>
  head>
  <body>
    
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    
    <div id="app">div>
    
  body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    4、.vue文件替换成上一节的内容

    1、App.vue修改

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    2、components/School.vue

    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    3、components/Student.vue

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    5、启动项目并打开页面

    由于日常开发使用 npm run dev 命令启动习惯了，故个人在package.json追加一条指令

    “dev”: “vue-cli-service serve”

    这样我就依然可以快乐的使用 npm run dev 启动了~

    在这里插入图片描述

    6、Result

    在这里插入图片描述

  • 相关阅读:
    Day2讲课习题题解
    设计模式 — — 单例模式
    C学生数据库_读取文件中学生信息1。
    Spring拦截器HandlerInterceptor和HandlerInterceptorAdapter
    【c++】用C++制作一个简易windows系统
    互联网摸鱼日报(2023-10-16)
    VB开发OCX控件的属性之自定义列表项
    安卓场景开发（一） 引导页面
    Java设计模式之备忘录模式
    冒死开源。阿里新产Spring Boot+Spring Cloud微服务开发实战笔记
  • 原文地址：https://blog.csdn.net/qq_30769437/article/details/126147184