# 58.Vue脚手架
# 1.Vue脚手架的基本使用
Vue 脚手架用于快速生成 Vue 项目基础架构. 其官网地址为: https://cli.vuejs.org/zh/
使用步骤
1.安装 3.X版本的 Vue 脚手架
1.npm uninstall vue-cli -g //卸载vue-cli旧版本</br>
2.npm install -g @vue/cli //安装新版本</br>
3.vue -V //2.9.6,我差，根本没删除掉！</br>
1
2
3
2
3
- 使用 vue -V 查看版本号
# 2.基于3.X版本的脚手架创建vue项目
// 1.基于 交互式命令行 的方式, 创建 新版 vue 项目
vue create my-project
// 2.基于 图形化界面 的方式, 创建 新版 vue 项目
vue ui
// 3.基于 2.x 的旧模板, 创建旧版 vue 项目
npm install -g @vue/cli-init
vue init webpack my-project
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Vue脚手架可以快速生成Vue项目基础的架构。 A.安装3.x版本的Vue脚手架：
B.基于3.x版本的脚手架创建Vue项目：
1).使用命令创建Vue项目
命令：vue create my-project
选择Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选。
是否选用历史模式的路由：n
ESLint选择：ESLint + Standard config
何时进行ESLint语法校验：Lint on save
babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
是否保存为模板：n
使用哪个工具安装包：npm
2).基于ui界面创建Vue项目
命令：vue ui
在自动打开的创建项目网页中配置项目信息。
3).基于2.x的旧模板，创建Vue项目
npm install -g @vue/cli-init
vue init webpack my-project
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
C.分析Vue脚手架生成的项目结构
node_modules:依赖包目录
public：静态资源目录
src：源码目录
src/assets:资源目录
src/components：组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:语法校验
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11