開發(fā)前準(zhǔn)備
- 首先全局安裝 vue-cli，通過
npm install -g @vue/cli或者yarn global add @vue/cli克滴，安裝之后，可以通過在 cmd 中輸入vue --version來查看版本信息以驗(yàn)證是否安裝成功 - 如果之前存在老版本的 vue-cli优床，當(dāng)前安裝會(huì)覆蓋掉劝赔，所以如果想要保留老的版本，參考鏈接
初始化項(xiàng)目
cmd方式初始化
新建一個(gè)工作目錄胆敞，shift + 鼠標(biāo)右鍵着帽，打開命令行界面，vue create [app-name]移层，按照提示來選擇即可仍翰，參考鏈接
高級(jí)選項(xiàng)： vue create [app-name] -p [preset-name] 可以指定一個(gè)預(yù)設(shè)，來快速創(chuàng)建一個(gè)成熟的項(xiàng)目模板观话，但是在此之前需要有配置好的預(yù)設(shè)予借，該預(yù)設(shè)可以是一個(gè) git 地址或者保存在本地中的 .vuerc 中的預(yù)設(shè)或者一個(gè)相對(duì)或者絕對(duì)路徑的
.json文件，后面詳細(xì)講解預(yù)設(shè)的配置和作用
ui界面方式初始化
新建一個(gè)工作目錄匪燕，打開命令行界面蕾羊，輸入
vue ui回車后喧笔，會(huì)自動(dòng)打開默認(rèn)瀏覽器帽驯，啟動(dòng)一個(gè) ui 界面來指導(dǎo)創(chuàng)建 vue 項(xiàng)目，包含插件书闸，依賴項(xiàng)以及配置項(xiàng)的安裝尼变，還提供了啟動(dòng)開發(fā)服務(wù)器和打包構(gòu)建的功能只要是通過
vue-cli3初始化一個(gè)項(xiàng)目之后，在任何地方都可以通過命令行界面輸入vue ui來管理所有通過vue-cli3初始化的項(xiàng)目
預(yù)設(shè)的作用以及配置
預(yù)設(shè)的作用
通過 vue create [app-name] 初始化項(xiàng)目的最后一步，會(huì)提示是否將項(xiàng)目配置保存起來嫌术，默認(rèn)保存位置為 home >.vuerc哀澈，這個(gè)就是項(xiàng)目配置中的預(yù)設(shè)，在下次創(chuàng)建項(xiàng)目的時(shí)候度气，想要快速搭建完整的項(xiàng)目模板割按，而不是為插件和依賴以及配置項(xiàng)頭疼的話，就可以在初始化項(xiàng)目的時(shí)候通過 vue create [app-name] -p [preset-name] 來為當(dāng)前項(xiàng)目指定預(yù)設(shè)（如果你之前保存有預(yù)設(shè)的話）磷籍，或者通過 vue create [app-name] 直接創(chuàng)建項(xiàng)目适荣，vue-cli 會(huì)讀取保存的 .vuerc 文件中保存的預(yù)設(shè)，可以手動(dòng)選擇你想要的預(yù)設(shè)（如果你之前保存有預(yù)設(shè)的話）院领， 里面保存的內(nèi)容會(huì)被 vue 插件的生成器生成對(duì)應(yīng)的項(xiàng)目文件以及合并配置項(xiàng)等
預(yù)設(shè)的配置項(xiàng)
{
// 包管理工具弛矛，根據(jù)你在通過 cli3 初始化項(xiàng)目時(shí)指定而設(shè)置，可修改
"packageManager": "yarn",
"presets": {
// 當(dāng)前預(yù)設(shè)名稱比然，例如： 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)可能不同硕淑，以以下插件為例课竣，簡單說明插件配置
"@vue/cli-plugin-eslint": {
// 為當(dāng)前插件顯示指定安裝的版本范圍或者某一具體版本，推薦
"version": "^3.0.1",
// 為使用預(yù)設(shè)的項(xiàng)目開啟當(dāng)前插件的提示置媳，以當(dāng)前插件為例于樟，會(huì)提示開發(fā)者重新選擇檢驗(yàn)規(guī)則，如果該項(xiàng)存在且為 true拇囊，那么優(yōu)先級(jí)最高迂曲，即會(huì)通過提示覆蓋掉當(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àn)传黄；
// 02-ESLint + Airbnb config杰扫，在使用 Airban 公司前端開發(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固翰，開發(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ù)處理器添加配置項(xiàng)，參考鏈接：https://cli.vuejs.org/zh/guide/css.html
"loaderOptions": {}
},
// 只在開發(fā)環(huán)境下冈欢，使用 eslint-loader 在保存文件時(shí)校驗(yàn)歉铝，需要單獨(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/ 下面的依賴項(xiàng)放入該數(shù)組，支持字符串名稱或者正則表達(dá)式
"transpileDependencies": [],
// 參考下面的講解到的 webpack 配置項(xiàng)
"configureWebpack": {},
// 配置開發(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 依賴
"router": true,
// 該值為 true，開啟 history 模式邻吭，否則回退到 hash 模式
"routerHistoryMode": true,
// 該值為 true餐弱，在初始化的時(shí)候會(huì)添加 vuex 依賴
"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ú)拿出來說一下，你可以查看官網(wǎng)的對(duì)此用法說明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配置毅臊，第一種是可以通過vue.config.js里面的configureWebpack或者chainWebpack，以函數(shù)的形式來查看黑界，這兩者都可以接受一個(gè)已經(jīng)解析好的配置作為參數(shù)的函數(shù)管嬉； - 參照第一種方法查看已經(jīng)解析好的配置項(xiàng)
vue.config.js.png
wepack.config.js-1.png -
第二種是通過
vue inspect的命令行方式查看，也可以將當(dāng)前的配置項(xiàng)輸出朗鸠，vue inspect > webpack.config.js蚯撩，當(dāng)然也可以通過package.json文件的scripts中添加命令來實(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)的配置和使用之前老版本的腳手架配置沒有區(qū)別的胎挎，只需要你在vue.config.js中配置修改或者增加，例如config.resolve.alias忆家、config.resolve.extensions犹菇，config.plugins.push(other plugin)等操作，但是對(duì)于細(xì)顆粒度的控制芽卿，可以通過chainWebpack來控制揭芍。 - 下面以
chainWebpack選項(xiàng)中的配置別名為例，簡單說明用法
首先在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來監(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]來初始化一個(gè)項(xiàng)目店乐，下面是加載個(gè)人git倉庫中配置的預(yù)設(shè)（你也可以直接 copy 過去在cmd中粘貼、回車即可）：vue create -p https://github.com:huxianghe/vue-cli3 vue-cli3呻袭。加載遠(yuǎn)程預(yù)設(shè)參考鏈接
項(xiàng)目環(huán)境的配置
環(huán)境變量類型
在 Vue CLI 2 甚至更早的腳手架中眨八，環(huán)境變量是在 config/*.env.js 中手動(dòng)指定好，但是在 @vue/cli 搭建的項(xiàng)目中左电，環(huán)境變量是根據(jù) mode 來設(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)接口地址的管理索赏，開發(fā)模式盼玄，預(yù)發(fā)布模式，生產(chǎn)模式接口不會(huì)相同潜腻，所以埃儿，我們有時(shí)候會(huì)基于環(huán)境配置額外的環(huán)境變量，并且該變量需要打包到客戶端融涣，就像在 Vue CLI 2 中蝌箍，通過 webpack.DefinePlugin 將 process.env 嵌入到客戶端中一樣。但是在 cli3 搭建的項(xiàng)目中暴心，是沒有 config 文件夾的妓盲，所以你想修改環(huán)境變量配置，需要在項(xiàng)目根目錄設(shè)置 .env 文件专普，參考鏈接悯衬，針對(duì)不同開發(fā)環(huán)境，設(shè)置不同的文件檀夹，這會(huì)保證該文件中的變量只在當(dāng)前模式下加載（exp: .env.development筋粗，env.production），并且需要注意炸渡，只有 VUE_APP_ 開頭的變量才會(huì)被添加到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方式管理項(xiàng)目的時(shí)候蚌堵，可以讓你更加直觀的知道自己項(xiàng)目構(gòu)建情況买决，如果你在構(gòu)建命令中添加了--report，也可以打開構(gòu)建好的項(xiàng)目下的report.html文件來查看項(xiàng)目的構(gòu)建情況吼畏。
build-analysis.png
寫在最后
- 基于
@vue/cli初始化項(xiàng)目的較為完整配置督赤，已放置到個(gè)人 git倉庫，你可以直接clone下來 - 本文為原創(chuàng)文章泻蚊，如果需要轉(zhuǎn)載躲舌，請(qǐng)注明出處，方便溯源性雄，如有錯(cuò)誤地方没卸，可以在下方留言羹奉。
