【VUE全家桶】vue-cli4脚手架创建项目

1. 我用的版本

软件	查看版本命令	版本	是否全局安装
node	node -v	v10.16.3	是
npm	npm -v	6.9.0	是
cnpm	cnpm -v	[email protected]	是
@vue/cli	vue -V	@vue/cli 4.2.2	是

2. 创建项目并配置项目

vue create .或者vue create 项目名// 项目名不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters，原因：为什么文件名要小写？

咱就别用旧版本了吧：
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init
vue init webpack my-project

• default：默认配置（只有babel和eslint）
• Manually select features：手动配置（选择）

• Babel：一种能让浏览器自动识别向后兼容各版本JavaScript的功能（选）
• TypeScript：TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行（不选）
• Progressive Web App（PWA）Support：渐进式网络应用（不选）什么是渐进式网络应用
• Router：vue的路由管理组件（选）
• Vuex：vue的状态仓库管理组件（选）
• CSS Pre-processors：CSS预编译（选）
• Linter/Formatter：代码检验 格式检查（选）
• Unit Testing：单元测试 以开发角度测试代码（反正我要选）
• E2E Testing：e2e测试 以用户角度测试代码（反正我要选）

• Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。我个人习惯选n。

我选择的是Sass/Scss(with dart-sass) ，号称世界上最成熟、最稳定、最强大的专业级CSS扩展语言！Sass中文网
node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。

我习惯用ESLint Prettier。Prettier已经被一些非常流行的项目比如React和Babel采用了。对于我自己的项目，我已经开始从自己的个性化风格全部转为Prettier风格。相比于Airbnb代码风格，我更推荐Prettier。

我习惯都选（严格要求自己规范代码）

• Lint on save：保存就检测
• Lint and fix on commit ：fix和commit时候检查

单元测试（我选Jest）

• Mocha + Chai ：mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
• Jest ：安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

端到端测试工具不知道选哪个（这里先选第一个，以后用到再说）

如何存放配置 ：

• In dedicated config files：独立文件放置（选）
• In package.json：放package.json里

配置保存这些配置，以便下次直接使用。Y

3. 初始项目结构

• public
• src
• test
• .browserslistrc
• .eslintrc.js
• babel.config.js
• cypress.json
• jest.config.js
• package-lock.json
• package.json
• README.md

后续再根据需要再添加目录和文件

4. 添加必要依赖

4.1 vue add element-ui

饿了么UI：官网文档

4.2 npm install axios

文档支持：
axios使用说明
axios中文网

4.2 npm i nprogress

访问进度条（暂时没有添加。。。）

4.3 npm i normalize.css

暂时没有添加，添加后更新
介绍：https://www.jianshu.com/p/9d7ff89757fd