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

1. 我用的版本

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

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. 环境配置

以dev、test、production分别表示开发，测试，生产三种环境为例
修改package.json

"scripts": {
    "serve": "vue-cli-service serve",									// 开发
    "test": "vue-cli-service build --mode test",           		// 测试
    "build": "vue-cli-service build --mode production",    // 生产
    "lint": "vue-cli-service lint"
}

在项目根目录下新建 .env.test、.env.preview、 .env.production 文件，分别对应三个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应，本地环境会默认从 .env.development 文件中读取配置，所以 “serve”: "vue-cli-service serve"后面不用加–mode参数

文件内容如下，等号后面的值可以不用引号，变量名必须以VUE_APP_开头
.env.development文件

NODE_ENV=development
VUE_APP_BASE_URL="http//:localhost/

.env.test文件

NODE_ENV=test
VUE_APP_BASE_URL=http//:localhost/

npm run serve    // 开发
npm run test     // 测试
npm run prod     // 生产

5. 项目配置

从 vue-cli3.0 开始 build 和 config 目录就取消了，如果需要修改配置，可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置，因为项目的配置比较多，这里就不分别介绍了，可以 访问官方文档之推荐配置
比如修改端口号：

module.exports = {
  devServer: {
    port: 9001
  }
}

6. 添加我在项目中用到的常用依赖

6.1 vue add element-ui

饿了么UI：官网文档

6.2 npm i axios

文档支持：
axios使用说明
axios中文网
我在项目中如何封装和使用axios的

6.3 npm i js-cookie 或者npm i vue-cookie

目前在项目中只使用到了基本的方法
【VUE】js-cookie和vue-cookis随便选一个用

6.4 npm i nprogress

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

6.5 npm i normalize.css

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

6.6 npm i svg-sprite-loader -D

介绍：【VUE】vuecli4项目优雅使用svg