Vue CLI 3.x 与 2.x的区别

时间 2019-11-08

标签 vue cli 3.x 2.x 区别栏目快乐工作繁體版

原文原文链接

主要区别

安装与项目构建
项目目录变化
项目配置变化

安装&项目构建

CLI安装

cli的包名变动css

# cli 2.x 
npm install -g vue-cli

# cli 3.x 
# 3.x 安装时，若是以前安装了2.x须要卸载2.x再安装
npm install -g @vue/cli
复制代码

项目构建

`cli2.x`

vue init <template-name> <project-name>
npm i 
npm run dev
复制代码

`cli3.x`

安装新增TypeScript配置选项

新增图形化安装方法

保留了2.x以前的安装方法

vue create hello-world
npm i
npm run serve
# 使用vue ui建立新项目(3.x新增)
vue ui
# 使用旧版（2.X）建立
npm install -g @vue/cli-init
# 'vue init'的运行效果与‘vue-cli@2.x’相同
vue init webpack projectname
复制代码

3.x后目录结构变化[替换2.x功能的新特性]

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

cli3新增模式概念，每一个模式在项目中都有对应的配置文件，项目启动时，对应的文件就会加载，与环境变量不一样，一个模式能够包括多个环境变量html

Vue CLI 项目默认有三个模式：
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- test 模式用于 vue-cli-service test:unit
模式须要在启动项目时使用--mode指定

NODE_ENV=development npm run serve --mode mymode # 模式包含多个环境变量
复制代码

每一个模式有多个环境变量，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方法配置参数vue

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

删除了static目录，它的静态资源转移到public目录中，经过/xx.xx能够直接访问webpack

`public`详细信息

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

`cli3.x`项目配置的不一样（`build`目录删除）

2.x版本的项目配置是在config和build中完成，可是，到了3.x版本，这两个目录都被删除，若是须要自定义配置，须要本身新建vue.config.js文件git

publicPath
- 部署应用包时的基本URL，即webpack的output.publicPath
- 但，vue项目中其余地方会用到publicPath，因此不要修改webpack的output.publicPath
- 用来取代baseUrl的，baseUrl 3.3后已弃用
outputDir
- build构建的文件存放的目录
- 即output.path，但只能修改outputDir，不能修改output.path
assetsDir 编译后，在outputDir目录中存放静态资源的目录
lintOnSave 配置eslint后，是否每次保存lint代码，默认启动
runtimeCompiler 是否使用包含运行时编译器的 Vue 构建版本，默认不启动
configureWebpack & chainWebpack
- 这两个选项是用来配置webpack内容的，前者是合并对象，后者是链式调用
- [cli3.6]webpack的build代码压缩默认不开启，须要设置环境变量为production才会开启
devServer 支持全部webpack-dev-server选项
- 配置项目端口、域名 host、port、https
- 配置项目跨域代理 proxy
```
module.exports = {
  port: 8100,
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
复制代码
```

新增功能特性

快速原型开发

在cli3.x中能够使用vue serve 和vue build命令对单个*.vue 文件进行快速原型开发web

vue serve 的缺点就是它须要安装全局依赖，这使得它在不一样机器上的一致性不能获得保证。所以这只适用于快速原型开发vue-router

安装全局依赖

npm install -g @vue/cli-service-global
复制代码

单个文件vuex

<template>
  <h1>Hello!</h1>
</template>
复制代码

`vue serve` 运行文件

vue serve myComponent.vue 
Usage: serve [options] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息
复制代码

`vue build` 编译文件

vue build myComponent.vue 
Usage: build [options] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
Options:
  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
  -d, --dest <dir>       输出目录 (默认值：dist)
  -h, --help             输出用法信息
复制代码

图形化界面

vue cli3 新增一个UI图形化管理页面，能够经过它新建项目、管理原有项目的插件vue-cli

建立新项目

vue ui # 启动图形化界面
复制代码

建立项目名称、管理工具等

选择是默认、自定义设置、从远程仓库拉取

第1、第三种选择后直接建立项目，第二种执行下一步，且功能与配置页的信息与以前命令行安装的相同express

管理原有项目（包括2.X项目）

插件管理（更新，查看）（3.x）
依赖（module）管理（删除、安装、更新、查看）（2.x、3.x）
项目配置修改（3.x）
项目任务（项目script命令启动、中止操做）（2.x、3.x）

`cli`插件

什么是插件

vue cli3.x使用了一套基于插件的架构，cli的相关依赖都是以@vue/cli-plugin-开头的
插件能够修改内部的 webpack 配置，也能够向 vue-cli-service 注入命令
在项目建立的过程当中列出的特性，绝大部分都是经过插件来实现的

`vue add` 插件的安装

cli3.x项目提供了vue add命令来安装插件

vue add @vue/cli-plugin-eslint
复制代码

同时，该命令能够识别下列写法，命令与上一行的命令等价

vue add eslint
vue add @vue/eslint
复制代码

该命令也能够在一个指定的范围内安装第三方插件

# 插件名：@foo/vue-cli-plugin-bar
vue add @foo/bar
复制代码

也能够向插件传递生成器选项

这样会跳过命令提示

vue add @vue/eslint --config airbnb --lintOn save
复制代码

特殊的`vue-router`和`vuex`

它们没有对应的插件，可是依旧能够使用vue add在项目中添加它们

vue add router
vue add vuex
复制代码

`vue invoke` 调用生成器

该命令会跳过安装过程直接调用插件的生成器，接收和vue add一致的参数

vue invoke @foo/bar
复制代码

本地插件读取

若是只须要在项目中直接访问插件API，而不须要建立完整的插件能够使用vuePlugin.service配置

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}
复制代码

或者 vuePlugin.ui 添加为UI插件

{
  "vuePlugins": {
    "ui": ["my-ui.js"]
  }
}
复制代码

预设配置

什么是预设配置

预设配置是一个包含建立新项目时所需的预约义选项和插件的JSON对象，只要在建立项目时，选中这个对象文件，就能安装文件的JSON内容常见项目，实现快速自定义建立项目

{
  "useConfigFiles": true,
  "router": true,
  "vuex": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
  },
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}
复制代码

预设配置包括插件生成器配置和集成工具的配置等待这些配置会根据useConfigFiles合并到package.json或相应的配置文件中，如当 "useConfigFiles": true 的时候，configs 的值将会被合并到 vue.config.js 中

预设配置插件的版本管理

预设配置中的插件能够显示的指定版本范围，若是没有值是由registry中最新版本（官方推荐指定）

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... 该插件的其它选项
    }
  }
}
复制代码

容许插件的命令提示

每一个插件在项目建立的过程当中均可以注入它本身的命令提示，不过当你使用了预设配置，这些命令提示就会被跳过，若是须要展现命令提示，则须要设置"prompts": true便可

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // 让用户选取他们本身的 ESLint 配置
      "prompts": true
    }
  }
}
复制代码

预设配置的使用

同时加载多个预设配置，选择使用

vue create过程当中保存的预设配置默认存放在~/.vuerc 将预设配置写在vuerc的'presets'属性中能够再建立项目时，能够显示多个预设配置。直接选择须要的建立项目便可

{
  "useTaobaoRegistry": false,
  "packageManager": "npm",
  "presets": { // 预设配置添加的地方，可添加多个预设配置
    "my_sets": { // 名为‘my_sets’的预设配置
      "useConfigFiles": true,
      "router": true,
      "vuex": true,
      "cssPreprocessor": "sass",
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "airbnb",
          "lintOn": ["save", "commit"]
        }
      }
    }
  }
}
复制代码

在`vue create`命令中使用`--preset`指定预设配置

该种形式只能加载json形式的文件，它有两种形式：本地预设和远程预设

本地预设

若是--preset选项的值是一个相对或绝对文件路径，或是以 .json结尾，则加载本地预设，不然加载远程预设

# ./my-preset 应当是一个包含 preset.json 的文件夹
vue create --preset ./my-preset my-project

# 或者，直接使用当前工做目录下的 json 文件：
vue create --preset my-preset.json my-project
复制代码

远程预设

从git上获取别人分享的预设

发布预设配置：经过发布git repo将一个预设配置分享给其余开发者，repo应该包含如下文件： *preset.json: 包含预设配置数据的主要文件（必需）。
- generator.js: 一个能够注入或是修改项目中文件的 Generator。
- prompts.js：一个能够为 generator 收集选项的 prompts 文件
拉取配置

# 从 GitHub repo 使用预设配置
vue create --preset username/repo my-project
复制代码

GitLab 和 BitBucket 也是支持的。若是要从私有 repo 获取，请确保使用 --clone选项：

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project
# 自托管的 repo
vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project
vue create --preset direct:ssh://git@my-gitlab-server.com/group/projectname.git --clone my-project
复制代码

配置文件样例

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: '/',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.VUE_APP_NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
  // 解析别名处理
  chainWebpack: config => {
    config.resolve.alias
      .set('@img', resolve('src/assets/img'))
      .set('@c', resolve('src/components'))
      .set('@m', resolve('src/mixins'))
      .set('@v', resolve('src/views'))
      .set('@s', resolve('src/store'))
  },
  // 配置高于chainWebpack中关于 css loader 的配置
  css: {
    // 是否开启支持 foo.module.css 样式
    modules: false,
    // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
    extract: true,
    // 是否构建样式地图，false 将提升构建速度
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
      }
    }
  },
  devServer: {
    port: 8010
  }
}

复制代码