Vue CLI 3.x 與 2.x的區別

主要區別

• 安裝與項目構建
• 項目目錄變化
• 項目配置變化

安裝&項目構建

CLI安裝

cli的包名變動

# 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新增模式概念，每一個模式在項目中都有對應的配置文件，項目啓動時，對應的文件就會加載，與環境變量不一樣，一個模式能夠包括多個環境變量

• 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方法配置參數

刪除static目錄[新增public目錄]

刪除了static目錄，它的靜態資源轉移到public目錄中，經過/xx.xx能夠直接訪問

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文件

• 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 文件進行快速原型開發

vue serve 的缺點就是它須要安裝全局依賴，這使得它在不一樣機器上的一致性不能獲得保證。所以這隻適用於快速原型開發

安裝全局依賴

npm install -g @vue/cli-service-global
複製代碼

單個文件

<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 ui # 啓動圖形化界面
複製代碼

建立項目名稱、管理工具等

選擇是默認、自定義設置、從遠程倉庫拉取

第1、第三種選擇後直接建立項目，第二種執行下一步，且功能與配置頁的信息與以前命令行安裝的相同

管理原有項目（包括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
  }
}

複製代碼