開發(fā)前準(zhǔn)備
- 首先全局安裝 vue-cli，通過
npm install -g @vue/cli或者yarn global add @vue/cli，安裝之后，可以通過在 cmd 中輸入vue --version來查看版本信息以驗證是否安裝成功 - 如果之前存在老版本的 vue-cli，當(dāng)前安裝會覆蓋掉，所以如果想要保留老的版本，參考鏈接
初始化項目
cmd方式初始化
新建一個工作目錄，shift + 鼠標(biāo)右鍵，打開命令行界面，vue create [app-name]，按照提示來選擇即可，參考鏈接
高級選項： vue create [app-name] -p [preset-name] 可以指定一個預(yù)設(shè)，來快速創(chuàng)建一個成熟的項目模板，但是在此之前需要有配置好的預(yù)設(shè)，該預(yù)設(shè)可以是一個 git 地址或者保存在本地中的 .vuerc 中的預(yù)設(shè)或者一個相對或者絕對路徑的
.json文件，后面詳細(xì)講解預(yù)設(shè)的配置和作用
ui界面方式初始化
新建一個工作目錄，打開命令行界面，輸入
vue ui回車后，會自動打開默認(rèn)瀏覽器，啟動一個 ui 界面來指導(dǎo)創(chuàng)建 vue 項目，包含插件，依賴項以及配置項的安裝，還提供了啟動開發(fā)服務(wù)器和打包構(gòu)建的功能只要是通過
vue-cli3初始化一個項目之后，在任何地方都可以通過命令行界面輸入vue ui來管理所有通過vue-cli3初始化的項目
預(yù)設(shè)的作用以及配置
預(yù)設(shè)的作用
通過 vue create [app-name] 初始化項目的最后一步，會提示是否將項目配置保存起來，默認(rèn)保存位置為 home >.vuerc，這個就是項目配置中的預(yù)設(shè)，在下次創(chuàng)建項目的時候，想要快速搭建完整的項目模板，而不是為插件和依賴以及配置項頭疼的話，就可以在初始化項目的時候通過 vue create [app-name] -p [preset-name] 來為當(dāng)前項目指定預(yù)設(shè)（如果你之前保存有預(yù)設(shè)的話），或者通過 vue create [app-name] 直接創(chuàng)建項目，vue-cli 會讀取保存的 .vuerc 文件中保存的預(yù)設(shè)，可以手動選擇你想要的預(yù)設(shè)（如果你之前保存有預(yù)設(shè)的話）， 里面保存的內(nèi)容會被 vue 插件的生成器生成對應(yīng)的項目文件以及合并配置項等
預(yù)設(shè)的配置項
{
// 包管理工具，根據(jù)你在通過 cli3 初始化項目時指定而設(shè)置，可修改
"packageManager": "yarn",
"presets": {
// 當(dāng)前預(yù)設(shè)名稱，例如： vue create [app-name] -p VuePreset，為當(dāng)前項目應(yīng)用該預(yù)設(shè)
"VuePreset": {
// 01-當(dāng)該值為 true 的時候，初始化項目的時候會在構(gòu)建目錄中生成對應(yīng)的配置文件
// 如：瀏覽器兼容范圍配置文件 .browserslistrc，eslint 配置文件 .eslintrc.js，postcss 配置文件 postcss.config.js
// 當(dāng)前預(yù)設(shè)如果有 configs 項，那么該項內(nèi)容會被合并到 vue.config.js 文件中
// 02-如果該值為 false，那么會在各配置項會集中到 package.json 文件中，為了更好的管理，建議設(shè)置為 true
"useConfigFiles": true,
// 插件配置項
// 插件的作用 TODO
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-pwa": {},
// 不同插件配置項可能不同，以以下插件為例，簡單說明插件配置
"@vue/cli-plugin-eslint": {
// 為當(dāng)前插件顯示指定安裝的版本范圍或者某一具體版本，推薦
"version": "^3.0.1",
// 為使用預(yù)設(shè)的項目開啟當(dāng)前插件的提示，以當(dāng)前插件為例，會提示開發(fā)者重新選擇檢驗規(guī)則，如果該項存在且為 true，那么優(yōu)先級最高，即會通過提示覆蓋掉當(dāng)前插件默認(rèn)的配置，如果你是項目構(gòu)建者身份，建議該項不設(shè)置或者設(shè)置為 false
"prompts": true,
// eslint 插件校驗的標(biāo)準(zhǔn)可選項為四種，分別為
// 01-Eslint with error prevention only，僅帶有錯誤語法提示的校驗；
// 02-ESLint + Airbnb config，在使用 Airban 公司前端開發(fā)規(guī)范配置的基礎(chǔ)上進(jìn)行校驗；參考鏈接：http://airbnb.io/javascript
// 03-ESLint + Standard config，標(biāo)準(zhǔn)校驗規(guī)則，參考鏈接：https://standardjs.com
// 04-ESLint + Prettier，使用 Prettier 風(fēng)格的校驗，參考鏈接： https://prettier.io/，https://github.com/prettier/prettier
// 05-針對四種配置規(guī)格，config 的可選擇分別為 base, airbnb, standard, prettier，可手動修改你喜歡的校驗風(fēng)格，參考鏈接：https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-eslint/prompts.js
"config": "standard",
// 校驗時機(jī)，可選擇在保存時校驗以及使用 git add 命令時候校驗
"lintOn": [
"save",
"commit"
]
}
},
// 如果該項存在并包含 vue 字段，會在項目根目錄生成 vue.config.js 文件，用作整個項目的配置文件
"configs": {
// 該字段中的配置項會被合并到 vue.config.js 文件中，如果你想構(gòu)建對于項目通用的配置，可以在預(yù)設(shè)中設(shè)置好，免去一些費(fèi)時的配置，參考鏈接：https://cli.vuejs.org/zh/config/#vue-config-js，關(guān)于更多的可配置項參考鏈接：https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/options.js
"vue": {
"css": {
// 是否抽離 css 樣式，生成環(huán)境為 true，開發(fā)環(huán)境為 false，需要單獨(dú)在 vue.config.js 文件中配置，這里只是配置的解釋說明
"extract": process.env.NODE_ENV === 'production',
// 以 css 模塊化導(dǎo)入 css 文件或其他預(yù)處理文件（exp:stylus）
"modules": false,
// 關(guān)閉 css 的源碼映射，提升構(gòu)建新性能
"sourceMap": false,
// 為 css 預(yù)處理器添加配置項，參考鏈接：https://cli.vuejs.org/zh/guide/css.html
"loaderOptions": {}
},
// 只在開發(fā)環(huán)境下，使用 eslint-loader 在保存文件時校驗，需要單獨(dú)在 vue.config.js 文件中配置，這里只是配置的解釋說明
"lintOnSave": process.env.NODE_ENV !== 'production',
// 生產(chǎn)環(huán)境關(guān)閉源碼映射，提升構(gòu)建性能
"productionSourceMap": false,
// 如果有依賴需要 babel 轉(zhuǎn)譯或者需要 polyfill，可將 node_modules/ 下面的依賴項放入該數(shù)組，支持字符串名稱或者正則表達(dá)式
"transpileDependencies": [],
// 參考下面的講解到的 webpack 配置項
"configureWebpack": {},
// 配置開發(fā)服務(wù)器
"devServer": {
"host": "localhost",
"port": 2019,
"hot": true,
"hotOnly": false,
"open": true,
"https": false,
// 編譯或者 eslint 校驗出現(xiàn)警告或者錯誤時，瀏覽器只顯示錯誤覆蓋層
"overlay": {
"warnings": false,
"errors": true
}
}
}
},
// 該值為 true，在初始化的時候會添加 router 依賴
"router": true,
// 該值為 true，開啟 history 模式，否則回退到 hash 模式
"routerHistoryMode": true,
// 該值為 true，在初始化的時候會添加 vuex 依賴
"vuex": true,
// 該項指定 css 預(yù)處理器，可支持 less，sass，stylus
"cssPreprocessor": "stylus"
}
}
}
關(guān)于預(yù)設(shè)中的 webpack 選項
在預(yù)設(shè)的 config.vue 選項中存在兩個關(guān)于 webpack 的配置項（configureWebpack、chainWebpack），因為這個關(guān)乎整個項目的構(gòu)建，所以單獨(dú)拿出來說一下，你可以查看官網(wǎng)的對此用法說明webpack相關(guān)。想要修改項目中 webpack 的配置，需要先知道，構(gòu)建好的項目中，已經(jīng)包含配置的有哪些，才能夠針對性的調(diào)整，這就需要你得獲取到 webpack.config.js 中的內(nèi)容。
- 關(guān)于查看構(gòu)建好的項目已有的
webpack配置，第一種是可以通過vue.config.js里面的configureWebpack或者chainWebpack，以函數(shù)的形式來查看，這兩者都可以接受一個已經(jīng)解析好的配置作為參數(shù)的函數(shù)； - 參照第一種方法查看已經(jīng)解析好的配置項
vue.config.js.png
wepack.config.js-1.png -
第二種是通過
vue inspect的命令行方式查看，也可以將當(dāng)前的配置項輸出，vue inspect > webpack.config.js，當(dāng)然也可以通過package.json文件的scripts中添加命令來實(shí)現(xiàn)"inspect": "vue-cli-service inspect > webpack.config.js" - 參照第二種方法查看已經(jīng)解析好的配置項，建議使用該種方法查看已生成的配置項，因為里面有配置的指導(dǎo)
package.json.png
wepack.config.js-2.png
可以看到相關(guān)的配置和使用之前老版本的腳手架配置沒有區(qū)別的，只需要你在vue.config.js中配置修改或者增加，例如config.resolve.alias、config.resolve.extensions，config.plugins.push(other plugin)等操作，但是對于細(xì)顆粒度的控制，可以通過chainWebpack來控制。 - 下面以
chainWebpack選項中的配置別名為例，簡單說明用法
首先在vue.config.js中配置好別名
webpack.alias-1.png
設(shè)置對應(yīng)的文件
webpack.alias-2.png
在單文件組件中import
webpack.alias-3.png
視圖中即可顯示導(dǎo)入的name
webpack.alias-4.png
更多的關(guān)于chainWebpack選項的配置，可查看webpack-chain參考鏈接 - 修改
vue.config.js文件之后需要每次手動yarn serve，這里提供npm包：nodemon來監(jiān)聽配置文件的變化，如果配置修改了，就重新執(zhí)行yarn serve：nodemon --watch vue.config.js --exec yarn serve。nodemon參考鏈接。
遠(yuǎn)程預(yù)設(shè)的獲取
如果你想加載遠(yuǎn)程預(yù)設(shè)，即遠(yuǎn)程倉庫（github、gitlab、Bitbucket ）中配置的預(yù)設(shè)，可以通過vue create -p username/repo [app-name]來初始化一個項目，下面是加載個人git倉庫中配置的預(yù)設(shè)（你也可以直接 copy 過去在cmd中粘貼、回車即可）：vue create -p https://github.com:huxianghe/vue-cli3 vue-cli3。加載遠(yuǎn)程預(yù)設(shè)參考鏈接
項目環(huán)境的配置
環(huán)境變量類型
在 Vue CLI 2 甚至更早的腳手架中，環(huán)境變量是在 config/*.env.js 中手動指定好，但是在 @vue/cli 搭建的項目中，環(huán)境變量是根據(jù) mode 來設(shè)置的，除非你手動修改，mode 值有三種： development，production，test，所以對應(yīng)的環(huán)境變量 NODE_ENV 也有三種。例如在你鍵入 npm run serve 或者 yarn serve 命令的時候，默認(rèn)進(jìn)入 development 模式了。
環(huán)境變量配置
通常我們會基于當(dāng)前的環(huán)境變量做一些事情，例如后臺接口地址的管理，開發(fā)模式，預(yù)發(fā)布模式，生產(chǎn)模式接口不會相同，所以，我們有時候會基于環(huán)境配置額外的環(huán)境變量，并且該變量需要打包到客戶端，就像在 Vue CLI 2 中，通過 webpack.DefinePlugin 將 process.env 嵌入到客戶端中一樣。但是在 cli3 搭建的項目中，是沒有 config 文件夾的，所以你想修改環(huán)境變量配置，需要在項目根目錄設(shè)置 .env 文件，參考鏈接，針對不同開發(fā)環(huán)境，設(shè)置不同的文件，這會保證該文件中的變量只在當(dāng)前模式下加載（exp: .env.development，env.production），并且需要注意，只有 VUE_APP_ 開頭的變量才會被添加到process.env 中，并且被 webpack.DefinePlugin 插件嵌入到客戶端中，下面是配置文件的示例：
-
創(chuàng)建環(huán)境配置文件
env.config.png -
開發(fā)環(huán)境配置
env.development.png -
測試包環(huán)境配置
env.testing.png -
正式包環(huán)境配置
env.production.png - 尤其是在使用
vue ui方式管理項目的時候，可以讓你更加直觀的知道自己項目構(gòu)建情況，如果你在構(gòu)建命令中添加了--report，也可以打開構(gòu)建好的項目下的report.html文件來查看項目的構(gòu)建情況。
build-analysis.png
寫在最后
- 基于
@vue/cli初始化項目的較為完整配置，已放置到個人 git倉庫，你可以直接clone下來 - 本文為原創(chuàng)文章，如果需要轉(zhuǎn)載，請注明出處，方便溯源，如有錯誤地方，可以在下方留言。
