vue开发使用vue-cli4.x创建项目详解

- 前言
vue-cli4.x新版本安装教程可以看看我之前的文章。版本更新后在创建项目上有所不同，这里做详细的步骤教程以及选项解释。

- 创建项目
vue create 项目名

- 选择配置

先无视第一项（我的个人配置，后面会讲到）；一般有两项：
default：默认配置（只有babel和eslint）
Manually select features：手动配置
一般做项目默认配置是不够的，我们选第二项。

- 进行配置

选项	解释
Babel	一种能让浏览器自动识别向后兼容各版本JavaScript的功能（选）
TypeScript	一种.ts后缀兼容js的语法（不选）
Progressive Web App（PWA）Support	渐进式网络应用（不选）
Router	vue的路由管理组件（选）
Vuex	vue的状态仓库管理组件（选）
CSS Pre-processors	CSS预编译（选）
Linter/Formatter	代码检验 格式检查（选）
Unit Testing	单元测试 以开发角度测试代码（不选）
E2E Testing	e2e测试 以用户角度测试代码（不选）

- 选择router模式

history和hash是router组件的mode选项，一般默认用history更普遍和实用。

- 选择CSS预编译方式

这里看你个人习惯，我经常用Sass/Scss（with node-sass）或者Less

- 选择代码校验方式

我习惯选ESLint with error prevention only或者最后一项ESLint+Prettier。如果是用VScode的小伙伴推荐最后一项，与VScode里的Prettier插件配合不错。

- 选择代码检查时间点

选择第一项Lint on save，在保存后就自动检验代码和格式。

- 询问配置保存位置

询问是否将配置放在package.json文件中。推荐选第一项In dedicated config files，创建新的配置文件。

- 保存为预配置

询问是否将以上配置保存为预配置，也就是刚第一步选择配置时我的“Jsxj-preset”。这个根据自己意愿，预配置对以后创建项目来说还是方便点的，
选择“Y”or“N”。如果“Y”，就继续设置预配置名称；如果“N”就自动跳过。

- 自动创建
回车开始自动创建项目，需要一定时间，创建成功结束后可以看到以下项目结构！