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