Vue CLI(脚手架)

Vue 脚手架是 Vue 官方提供的标准化开发工具

初始化

1.全局安装 npm i @vue/cli -g

2.打开cmd,cd到桌面：输入 vue create vue_test（vue_test是根文件夹名）

3.显示如下，选择Vue2或者Vue3

4.等待完成（打开根目录，如下图），在创建的根目录用vscode打开
vue_test:

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

5.运行（如上图），取消运行 CTRL+C

6.ctrl+click，然后显示如下（如上图）

7.npm run build（如上图）
会在根目录下生成文件夹 dist，（需要放在服务器下才能正常打开页面）

添加

public：css样式库
src：路由（router、pages（路由组件））、vuex（store）注意都是index.js
src/assets：一些静态资源，如图片、音频

提一下 src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el:'#app',
  // render函数功能：将App组件放入容器中
  // 简写形式
  render: h => h(App),
  // 完整形式
  // render(createElement){
  //   return createElement(App)
  // }
})