1. 介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
2. 安装
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
命令
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看是否安装成功
vue --version
#OR
vue -V
3. 创建项目
-
3.1 使用图形化界面
- 命令
vue uiimage.png按照页面流程提示创建项目即可，在此不进行过多介绍。image.png
- 命令
-
3.2 命令行创建
- 命令
vue create vue-demoimage.png
- 命令
default (babel, eslint) 默认模式。
Manually select features 手动模式。
ps：使用键盘得上下键来切换目标选项。
- 默认模式
一路回车即可 -
手动模式：image.pngimage.png
这个自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定。
- 选项含义：
- Babel：转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等
- TypeScript：新增的选项卡
- PWA：模拟原生app，渐进式网络应用程序
- Router：路由
- vuex：管理模式
- CSS Pre-processors：css预处理语言
- Linter / Formatter：代码规范
- Unit Testing：组件单元测试
-
E2E Testing：端对端测试，模拟用户真实场景
我的选择
image.png
-
询问router模式，vue-router 默认 hash 模式，所以我选择默认的，选择了 n ，而不是 history 模式：image.png
-
询问安装哪一种 CSS 预处理语言，我是选择了用的 less。image.png
-
询问选择哪个自动化代码格式化检测，配合 vscode 编辑器的，Prettier - Code formatter插件，我选的随后一个。image.png
-
询问什么时候进行代码检测，第一个是保存就检测，第二个是 fix 和 commit 的时候检查。我选择的是保存就检测。image.png
-
询问单元测试解决方案，Mocha是流行的JavaScript测试框架之一，通过它添加和运行测试，从而保证代码质量，chai 是断言库，我选择第一个 Mocha + Chai。image.png
-
询问像babel, postcss, eslint 这些配置文件放哪？第一个是：放独立文件放置，第二个是：放package.json里，我选择放单独配置文件。 image.png
-
询问是否将以上这些将此保存为未来项目的预配置吗 ？选择是的时候，下次创建项目时，可以选择刚刚配置好的配置，不用再每个都配置一遍。最后一个是选择的名字，随意选择，点击确定就开始下载模板了。image.png
4. 项目代码结构
image.png
未完待续...
