Vue CLI3
- vue-cli 3 与 2 版本
- vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
- vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
- vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
- 移除了static文件夹,新增了public文件夹,并且index.html移动到public中
Vue CLI3初始化项目
- vue create my-project
- 初始化命令,据你用的文件名创建一个文件夹,存放之后项目的内容
- 该名称也会作为默认的项目名称,但是不能包含大写字母等
? Target directory C:\Users\Desktop\Note\my-project already exists. Pick an action: (Use arrow keys)
> Overwrite 覆盖
Merge 合并
Cancel 取消
- 选择配置方式
Overwrite
覆盖
Merge
合并
Cancel
取消
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
- 请选择预设配置
default (babel, eslint)
默认配置
Manually select features
手动选择特性
- 选择手动配置后,空格选中或取消
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
Babel
支持es6语法转换(常用)
TypeScript
微软提供的js超集
Progressive Web App (PWA) Support
渐进式的网页应用程序
Router
路由
Vuex
状态管理模式+库
CSS Pre-processors
CSS预处理器
Linter / Formatter
ES6Lint检测代码规范
Unit Testing
支持单元测试
E2E Testing
e2e测试(end to end)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
- 对应的配置是单独生成文件还是放在package.json
? Save this as a preset for future projects? (y/N)
? Save preset as: mypreset
目录结构详解
- node_modules是依赖的node工具包目录
- public文件夹相当于脚手架2的static目录
- src文件夹是源代码
- .browserslistrc文件时游览器相关支持情况
- .gitignore文件是Git上传需要忽略的文件
- babel.config.js是ES语法转换
- package.json是项目描述文件
- README.md是项目文档
UI方面的配置