vue-cli3的改变

安装可能用到的插件(我们要分清--save和--save-dev，

区别就是:

• --save开发环境和生产环境都需要的比如：element、axios、vuex、router，
• --save-dev只在开发环境我们需要项目部署后不需要的比如eslint、sass)

config目录删除，使用模式的.env文件代替[模式]

Vue CLI 项目默认有三个模式：

• development 模式用于 vue-cli-service serve

• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

• test 模式用于 vue-cli-service test:unit

模式需要在启动项目时使用--mode指定

每个模式有多个环境变量，cli3.x为模式与环境变量指定了一个.env配置文件

.env # 所有环境
.env.mode # mode模式加载的配置文件[优先级高于.env]
.env.mode.development # mode模式下，development环境所加载的配置文件[优先级最高]

.env 文件详情

• 这些文件用来替代config目录
• 以VUE_APP_开头的变量可以在代码中使用process_env全局访问到，其他的不行。
• process_env 始终有两个特殊的变量的NODE_ENV和BASE_URL

3.x版本的config目录虽然删除，但是如果不习惯.env的方式，可以不设置任何模式，只指定NODE_ENV，按2.x的config方法配置参数

删除static目录[新增public目录]

将静态资源从static转移到public 通过`/xxx.xx直接访问

// public 目录的详情
`index.html`入口文件转到public文件目录下，拥有三种特殊的插值方式：
  - <%= VALUE %> 用来做不转义的插值
  - <%- VALUE %> 用来做 HTML 转义的插值
  - <% expression %>  用来JS的流程控制
静态资源被转义到`public`目录存放
cli3的静态资源的处理方式有两种
- 在JS或者template(css/vue)中通过相对路径导入的，这类资源会被webpack处理（不在public目录）
- 放在public目录或者使用绝对路径导入的静态资源。这类资源会被直接拷贝，不会经过webpack处理

cli3.x项目配置的不同（build目录删除）

cli2.x 版本的项目配置在config和build中完成的。但是到了3.x版本之后，这个两个配置文件目录都被清除，如果需要自定义配置文件，那么需要自定义配置文件vue.config.js

• publicPath

部署应用包的基本URL， 即webpack的output.publicPath.

但是，项目中其他的地方也会使用publicPath，所以不要修改。

提供publicPath来代替baseURL(已弃用)

• outputDir

build构建的文件存放目录 即打包目录， 即output.path

不能修改output.path ，只能修改outputDir

• assetsDir

编译后，在outputDir目录中存放静态资源的目录

• lintOnSave

配置eslint后，是否每次保存lint代码，默认启动

可以设置 false 取消

• runtimeComplier

是否使用包含运行时编译器的 Vue 构建版本，默认不启动

• configWebpack & ChainWebpack

configWebpack:是合并对象

ChainWebpack: 是链式调用

[cli3.6]webpack的build代码压缩默认不开启，需要设置环境变量为production才会开启

• devServer

支持所有的webpack-dev-server的所有的选项

• 配置项目端口，域名 host, port
• 配置项目跨域代理 proxy

devServer:{
        port: 8080,  // 配置端口
        open: true,  // 是否开启自启
        proxy:{      // 配置代理
            '/shop':{
                target: proUrl,   // 代理目标地址
                changeOrigin:true,   // ？？？
                pathRewrite:{'^/shop':''}  // 地址重写
            },
        }
    },

安装配置选择介绍

vue-cli3 提供特性选择供选择：

Babel：使用babel，便于将我们源代码进行转码（把es6=>es5） TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处 Progressive Web App(PWA)：使用渐进式网页应用（PWA） Router：使用vue-router Vuex：使用vuex状态管理器 CSS Pre-processors：使用CSS预处理器，比如：less，sass等 Linter/Formatter：使用代码风格检查和格式化 Unit Testing：使用单元测试 E2E Testing：使用E2E测试, end to end（端到端）是黑盒测试的一种

• Use class-style component syntax? (Y/n)

是否使用Class（类）风格装饰器, 即通过export default class Home extends Vue{} 创建Vue实例

• Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

使用Babel做转义, 与TypeScript一起用于自动检测

• Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

使用Babel做转义, 与TypeScript一起用于自动检测

• Pick a CSS pre-processor?

选择一种css 预处理器, 在这里我选择less

• Pick a linter / formatter config?

选择一种代码格式化检测工具

TSLint: ts格式检验工具
ESLint with error prevention only: ESLint 只会进行错误提醒
ESLint + Airbnb config: ESLint Airbnb标准
ESLint + Standard config: ESLint Standard 标准
ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具）

• Pick additional lint features?

代码检查方式: 保存时检查 or 提交时检查; 我选择, 保存时检查

• Pick a unit testing solution?

选择一种单元测试的方案，目前Vue官方推荐也是jest, 相比而言, 配置简单容易上手, 建议选择Jest啦

• Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里? 这里方便配置清晰好看, 我选择每个配置单独文件。

• Save this as a preset for future projects?

是否需要保存当前配置，在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置, 不需单独配置

Vue3.0(vue.2.6.x)不在有webpack.config.js的配置, 是因为Vue3.0 通过插件@vue/cli-service对webpack进行抽象处理, 并默认了webpack的配置。但是项目开发中，我们肯定会存在一些特殊的需求需要调整webpack, 当然这也是没有问题, 在Vue3.0当中, 可以通过在项目的根目录创建vue.config.js对webpack进行自定义配置。

新增功能特性

快速原型开发

图形化界面操作

预设设置