Vue CLI 创建项目流程

安装 Vue CLI

请参照官方文档
本次操作使用vue/cli 版本为 @vue/cli 4.5.11

创建项目

# vue-template 为项目名称
vue create vue-template

1.选择预设

• Default ([Vue 2] babel, eslint) 默认配置 Vue 2 提供babel和eslint支持
• Default (Vue 3 Preview) ([Vue 3] babel, eslint) 默认配置 Vue 3 预览版 提供babel和eslint支持
• Manually select features 自己手动去选择需要的配置

2.一般选择手动配置

• Choose Vue version 选择Vue.js 版本（勾选）
• Babel JavaScript编译器主要是对es6语法转换成兼容的js （勾选）
• TypeScript 添加对TypeScript语言的支持
• Progressive Web App (PWA) Support PWA 支持
• Router Vue.js 官方的路由管理器（一般都会用到）
• Vuex 支持vue程序状态管理模式（一般都会用到）
• CSS Pre-processors css预处理器（一般都会用到）
• Linter / Formatter 支持代码风格检查和格式化（勾选）
• Unit Testing 单元测试
• E2E Testing E2E测试

3.选择Vue.js版本

这里选择vue2.x版本

4.HTML5 History 模式

官方文档

这里选择yes，直接回车

5.选择css预处理器

根据需要选择，这里选择 Sass/SCSS (with dart-sass)

6.选择一个linter / formatter配置

这里选择 ESLint + Standard config

7.选择什么时候进行代码检测

这里选择保存时检测，选 Lint on save

8.选择插件的配置保存在哪里

将Babel、ESLint等的插件的配置保存在各自的配置文件（比如 '.babelrc'）中，让package.json更清晰，所以选择第一个In dedicated config files

9.是否将上述选择的配置保存，将来项目就可以快速选择

这里不选，直接回车

10.项目创建完成

11.启动项目

cd vue-template
yarn serve