VueCLI3.x與2.x的區別

NO IMAGE

主要區別

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

安裝&項目構建

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'的運行效果與‘[email protected]’相同
vue init webpack projectname

3.x後目錄結構變化[替換2.x功能的新特性]

VueCLI3.x與2.x的區別

config目錄刪除,使用模式的.env文件代替[模式]

cli3新增模式概念,每個模式在項目中都有對應的配置文件,項目啟動時,對應的文件就會加載,與環境變量不同,一個模式可以包括多個環境變量

  • Vue CLI 項目默認有三個模式:
    • development 模式用於 vue-cli-service serve
    • production 模式用於 vue-cli-service buildvue-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_ENVBASE_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項目的靜態資源有兩種處理方式
    • 在JavaScripttemplate/css(vue)中通過相對路徑導入。這類資源會被webpack處理(不在public目錄)
    • 放在public目錄或者使用絕對路徑被導入的靜態資源。這類資源會被直接拷貝,不會經過webpack處理

cli3.x項目配置的不同(build目錄刪除)

2.x版本的項目配置是在configbuild中完成,但是,到了3.x版本,這兩個目錄都被刪除,如果需要自定義配置,需要自己新建vue.config.js文件

  • publicPath
    • 部署應用包時的基本URL,即webpackoutput.publicPath
    • 但,vue項目中其他地方會用到publicPath,所以不要修改webpackoutput.publicPath
    • 用來取代baseUrl的,baseUrl 3.3後已棄用
  • outputDir
    • build構建的文件存放的目錄
    • output.path,但只能修改outputDir,不能修改output.path
  • assetsDir 編譯後,在outputDir目錄中存放靜態資源的目錄
  • lintOnSave 配置eslint後,是否每次保存lint代碼,默認啟動
  • runtimeCompiler 是否使用包含運行時編譯器的 Vue 構建版本,默認不啟動
  • configureWebpack & chainWebpack
    • 這兩個選項是用來配置webpack內容的,前者是合併對象,後者是鏈式調用
    • [cli3.6]webpackbuild代碼壓縮默認不開啟,需要設置環境變量為production才會開啟
  • devServer 支持所有webpack-dev-server選項
    • 配置項目端口、域名 host、port、https
    • 配置項目跨域代理 proxy
    module.exports = {
    port: 8100,
    devServer: {
    proxy: 'http://localhost:4000'
    }
    }
    

新增功能特性

快速原型開發

cli3.x中可以使用vue servevue 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 # 啟動圖形化界面
創建項目名稱、管理工具等

VueCLI3.x與2.x的區別

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

VueCLI3.x與2.x的區別

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

管理原有項目(包括2.X項目)
  • 插件管理(更新,查看)(3.x)
  • 依賴(module)管理(刪除、安裝、更新、查看)(2.x、3.x)
  • 項目配置修改 (3.x)
  • 項目任務(項目script命令啟動、停止操作)(2.x、3.x)
    VueCLI3.x與2.x的區別
    VueCLI3.x與2.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-routervuex

它們沒有對應的插件,但是依舊可以使用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"]
}
}
}
}
}

VueCLI3.x與2.x的區別

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
  • GitLabBitBucket 也是支持的。如果要從私有 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://[email protected]/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
}
}

相關文章

HttpClient工具類

VUE組件通信的十種姿勢

nginx歸納總結

使用React製作一個滑動輪播展示組件