Vue-cli3 创建项目

检测环境
必须安装有node、且vue-cli版本为3，这里的vue -V是查看vue-cli的版本号，同学们不要搞错了哦！

创建流程

// 创建命令，项目名为test
vue create test

如果你想要创建的文件夹中已经存在与创建的项目项目名称相同的文件夹，即你在D:\dev文件路径执行命令且D:\dev中已经存在test文件夹，则会出现以下选项：

? Target directory D:\dev\test already exists. Pick an action: (Use arrow keys)
  Overwrite		// 覆盖已经存在的文件夹
> Merge			// 合并文件夹
  Cancel		// 取消创建

这种情况常见于我们在线上代码库创建了代码仓库并克隆到本地后，我们会想要在仓库一级直接创建项目而不是子目录，这时候我们一般选择 Merge合并 选项，选择确认后会出现以下选项：

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)		// 默认创建
> Manually select features		// 手动选择创建

选择default之后会直接创建项目，这里我们选择手动创建。
下面我们按需选择，上下方向键移动，空格键选择，一般建议选择如下：

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel		// 转码器，将ES6转为ES5，这里建议选上，兼容低版本浏览器
 ( ) TypeScript		// TS语法，有感兴趣的同学可以尝试一下
 ( ) Progressive Web App (PWA) Support		// 渐进式Web应用程序，不知道能干嘛，求大佬指教
 (*) Router		// 建议，Vue全家桶的路由vue-router
 (*) Vuex		// 建议，Vue全家桶的Vuex状态管理
>(*) CSS Pre-processors		// CSS预处理器
 (*) Linter / Formatter		// 格式验证，看同学们对自己的代码格式规范是否严格，可选
 ( ) Unit Testing		// 单元测试
 ( ) E2E Testing		// E2E测试

选择选项后会询问我们是否使用history模式，history模式是vue-router模式选择mode中的一种，这里详情可以看一下vue-router官方文档，这个选择个人感觉不大重要，后期可以自行设置更改的，更改配置可以参考Vue3项目切换(设置)路由模式，这里我一般选择N(否，不使用)

// 是否选择history模式
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

接下来选择css预处理类型，这里看自己习惯使用什么，我这里选择的Sass/SCSS (with node-sass)，有时候也会使用Less，感觉差别不大，看个人爱好吧，另外两个不是很了解了

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass)	// 这个是新出来的，还不是很清楚
> Sass/SCSS (with node-sass)	// node-sass，我选择的是这个
  Less		// Less
  Stylus

接下来是逃不掉不避开的ESLint检测选择，这个完全看自己了，都不影响的，喜欢挑战或者要求严格的同学可以尝试选择严格模式(真的变态，标点符号、换行这些都要按照标准来)

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only		// 只进行报错提醒
  ESLint + Airbnb config		// 不严谨模式
  ESLint + Standard config		// 正常模式
> ESLint + Prettier		// 严格模式
  // 据说在上面选择了 TypeScript 的同学这里会有个TSLint (deprecated)选项

接下来就是选择什么时候校验了，建议选择保存时检测，毕竟早检测早治疗嘛~~~

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save		// 保存时检测
 ( ) Lint and fix on commit		// 修复和提交时检测

这是在问你要在哪里保存各类配置设置，建议选择第一个在独立的配置文件

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

最后就是问你是否保存这一次的选项配置了，保存的话下一次创建时就可以选择这次配置快速创建了

? Save this as a preset for future projects? (y/N) N

1.以上是我个人的创建选择，选择单元测试等选项的还有其他选项，有兴趣的同学可以自己试一试；
2.本文主要是记录自己创建流程，如有错误，希望各位大佬不吝指教