4.3 认识Vue-cli3

• Vue-cli3与2版本有很大区别

1. Vue-cli3基于webpack4打造，Vue-cli2是基于webpack3；
2. Vue-cli3设计原则是0配置，移除了build和config等目录；
3. Vue-cli3提供了vue ui命令，提供了可视化配置；
4. 移除了static文件夹，新增puclic文件夹，并且index.html移至public中；
5. 现在做项目都用Vue-cli3。

• Vue-cli3创建步骤

1. Please pick a preset?  有Default ([Vue 2] babel, eslint)、  Default (Vue 3) ([Vue 3] babel, eslint)、 Manually select features三项选择，此处选择 Manually select features;
2. Check the features needed for your project?  选择某项的话用空格键；
3. Where do you prefer placing config for Babel, ESLint, etc.?询问配置在放在单独的文件还是package.json文件。此处选择放在单独文件;
4. Save this as a preset for future projects?要不要把以上配置保存为一个选项。此处选择是；
5. Save preset as? 取个名字

• 如果想删除保存的配置选项名字，在vuerc里面删除。 
• 输入vue ui启动GUI配置界面。跟所在目录没有关系
• 箭头函数中的this是如何查找的？向外层作用域中一层层查找this,直到有this的定义
• vue-cli2和3启动的区别：dev和serve   npm start也可以启动

---

选择初始化项目的配置

1）default是自动安装，Manually select features是手动安装，若使用 Git Bash交互提示符不工作，则上一步需输入：winpty vue.cmd create vue-practice（项目名称）

2）vue-cli3.x 提供以下特性，可根据项目需要进行配置，使用空格键选中：

*Babel：使用babel，便于将我们源代码进行转码（把es6=>es5）

*TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js

*Progressive Web App(PWA)：使用渐进式网页应用（PWA）

√*Router：使用vue-router

√*Vuex：使用vuex状态管理器

√*CSS Pre-processors：使用CSS预处理器，比如：less，sass等

√*Linter/Formatter：使用代码风格检查和格式化

*Unit Testing：使用单元测试

*E2E Testing：使用E2E测试, end to end（端到端）是黑盒测试的一种

3）选择vue版本，我这里选择3.x

4）Use history mode for router？路由模式, 是否选择history模式

5）Pick a CSS pre-processor? 选择一种css 预处理器，我这里选择scss

6）Pick a linter / formatter config? 选择一种代码格式化检测工具

*TSLint: ts格式检验工具

*ESLint with error prevention only: ESLint 只会进行错误提醒

*ESLint + Airbnb config: ESLint Airbnb标准

*ESLint + Standard config: ESLint Standard 标准

√*ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具）

7）Pick additional lint features?

代码检查方式: 保存时检查 or 提交时检查，我选择保存时检查

8）Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

Babel, PostCSS, ESLint等配置文件怎么存放, 是放到单独的配置文件中，还是放到package.json里，为方便配置清晰好看, 我选择每个配置单独文件存放

9）Save this as a preset for future projects?

是否需要保存当前配置，在以后的项目中可快速构建。保存后, 后续创建项目时可以直接选择该配置, 不需单独配置

10）点击回车，会自动初始化项目

11）打开该项目，默认运行npm run serve启动项目

也可直接将serve改为dev（可改为任意名称），就可以使用npm run dev来启动项目了