簡介
vue cli 3 是一個類似于 create-react-app 的可以用例命令行快速配置和生成一個 vue 項(xiàng)目劫拗。]vue cli 3 與之前版本最大的幾個變化變化是：
- 選擇項(xiàng)目插件界面更友好了辜妓。如選擇 eslint 類型、是否需要 router 和 vuex 等行為碌宴。
- 實(shí)現(xiàn)了界面化創(chuàng)建和操作項(xiàng)目，使用
$ vue ui啟動教授架頁面贰镣。 - 將常用配置項(xiàng)進(jìn)行了封裝，統(tǒng)一使用 vue-config.js 來進(jìn)行配置碑隆。
- 給出 vue-cli-plugin 插件來快速改變項(xiàng)目目錄結(jié)構(gòu)和Webpack配置。
可以說 vue cli 3 是基于之前腳手架的大幅優(yōu)化和改進(jìn)上煤，并提供了各種貼心的功能。真正實(shí)現(xiàn)一鍵生成、一鍵調(diào)試拴疤、一鍵發(fā)布這些快捷的行為。方便開發(fā)者將注意力更聚焦于業(yè)務(wù)層面呐矾。
了解 vue cli
我們使用問答的方式來有針對性的解決 vue cli 相關(guān)問題。
vue cli 可以具體做些什么蜒犯？
具體細(xì)節(jié)建議去仔細(xì)看文檔！下面列舉出一些可以做的行為：
- 便捷的創(chuàng)建項(xiàng)目
- 添加 vue 插件快速配置項(xiàng)目
- 啟動服務(wù)調(diào)試開發(fā)
- 瀏覽器兼容
- HTML和靜態(tài)資源 assets 的處理
- 配置 CSS
- 配置 Webpack
- 配置環(huán)境變量和環(huán)境模式
- 針對不同環(huán)境進(jìn)行打包
- 發(fā)布項(xiàng)目
就這么多罚随，我覺得工作中常用的都已經(jīng)涵蓋進(jìn)去了。
vue cli 的插件是什么毫炉？
插件其實(shí)是一個 npm 上的小項(xiàng)目。使用 $ vue add 命令去執(zhí)行下載插件包瞄勾，并且調(diào)用插件包去修改 Webpack 配置并執(zhí)行一些 command 命令。add 行為可以拆開為兩部 —— 安裝和調(diào)用进陡，以 @vue/cli-plugin-eslint 為例：
npm install @vue/cli-plugin-eslint --save-dev
vue invoke @vue/eslint
我們也可以自行開發(fā) vue 插件，具體請看文檔趾疚。
簡單說下插件安裝
注意安裝插件是有簡寫的，到安裝的時候會補(bǔ)全插件名稱糙麦。簡寫方式如下：
# 簡寫
vue add @vue/eslint
# 全名
vue add @vue/cli-plugin-eslint
# 簡寫
vue add apollo
# 全名
vue add vue-cli-plugin-apollo
而 router 和 vuex 插件比較特殊，它沒有相應(yīng)的插件赡磅，所以使用 add 的形式有所不同。
vue add router
vue add vuex
以上兩個命令會為項(xiàng)目安裝 vue-router 和 vuex焚廊，并且改變項(xiàng)目目錄結(jié)構(gòu)以便更快的進(jìn)行路由和狀態(tài)管理的開發(fā)操作。
vue cli 的插件在哪里找咆瘟？都有哪些官方插件？源碼在哪里袒餐？
其實(shí)這些插件是放在了 npm 中的须肆，和其他模塊類似。下面是從尤大的npm中找到的插件包：
- @vue/cli-plugin-babel
- @vue/cli-plugin-e2e-cypress
- @vue/cli-plugin-e2e-nightwatch
- @vue/cli-plugin-eslint
- @vue/cli-plugin-typescript
- @vue/cli-plugin-pwa
- @vue/cli-plugin-unit-mocha
- @vue/cli-plugin-unit-jest
-
@vue/cli-service 這個項(xiàng)目存放了
vue add router和vue add vuex命令的模板項(xiàng)目豌汇。
這些插件項(xiàng)目源碼都包含在 vue-cli 項(xiàng)目中泄隔。
所以拒贱，插件包這東西得從 npm 找佛嬉，或者自己寫插件！
vue cli 搭建的項(xiàng)目中如何配置 sass暖呕、stylus？
在Work with CSS中已有答案湾揽，在項(xiàng)目中調(diào)用：
# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
即可實(shí)現(xiàn)對 stylus 這類 CSS 語法的支持。
vue cli 的 vue.config.js 具體能做什么库物？
用新的腳手架搭建的項(xiàng)目少了 webpack.config.js 文件和其他一些配置文件，那么我們?nèi)绾涡薷南嚓P(guān)的配置呢戚揭？答案就是 vue.config.js。vue.config.js 可以配置項(xiàng)如下：
- baseUrl —— 域名民晒，可根據(jù)環(huán)境變量來配置不同域名。
- outputDir —— 項(xiàng)目導(dǎo)出文件夾
- assetsDir —— 靜態(tài)資源文件夾
- pages —— 多頁應(yīng)用中配置各個頁面入口文件
- lintOnSave —— eslint 是否在保存行為的時候檢查代碼潜必。默認(rèn)為 warning，如果配置為 error 則有錯誤直接報 eslint 錯誤刮便。
- runtimeCompiler —— 是否使用 runtime 版本的 vue 文件绽慈。設(shè)為
true可以使用 template 配置項(xiàng)目恨旱。 - transpileDependencies —— 用于修改 babel 配置
- productionSourceMap —— 如果不需要產(chǎn)品的 source map坝疼，設(shè)為
false可以加速構(gòu)建。 - configWebpack —— 用于配置 Webpack钝凶，將與默認(rèn)的 Webpack 配置合并唁影。
- chainWebpack —— Webpack鏈，用于配置 loader rules 和 plugins
- css.modules —— css 模塊化
- css.extract —— 從組件中取出 css
- css.sourceMap —— 是否需要 css 的 sourceMap据沈，會影響構(gòu)建效果。
- css.loaderOptions —— 配置 CSS 相關(guān) loader锌介，如 sass-loader、stylus-loader孔祸。
- devServer —— 開發(fā)服務(wù)器配置
- devServer.proxy —— 開發(fā)服務(wù)器代理配置
- parallel —— 是否對 Babel 或 TypeScript 使用
thread-loader - pwa —— pwa 配置
- pluginOptions —— 這是一個不經(jīng)過任何模式驗(yàn)證的對象，因此它可以用于將任意選項(xiàng)傳遞給第三方插件崔慧。比如寫一個
options.pluginOptions.foo插件配置對象隨時調(diào)用。
如何配置 Webpack惶室？
正如我們上面提到的，使用 vue.config.js 的 configWebpack 和 chainWebpack 來配置 Webpack拇涤。請參考 Working With Webpack。
如果想查看 Webpack 具體配置結(jié)果可使用以下命令導(dǎo)出具體配置：
vue inspect > output.js
更多 Webpack 檢查方式在這里
vue cli 的 UI 怎么玩鹅士？
使用命令行啟動 vue ui 項(xiàng)目：
vue ui
啟動腳手架圖形化項(xiàng)目并自動打開 http://localhost:8000 頁面惩坑，在這個頁面中可以進(jìn)行插件安裝掉盅、依賴庫查看以舒、命令執(zhí)行趾痘、全局配置蔓钟、項(xiàng)目導(dǎo)入等操作。很有意思滥沫，值得一玩。
vue-cli 源碼簡單介紹
vue cli 項(xiàng)目內(nèi)容還是很多的兰绣，大概包括了：
- cli
- cli service
- vue plugin
- utils
- ui（就是個 Vue 單頁應(yīng)用）
- eslint config
核心代碼就在 cli 目錄下了~
對于 cmd 行為的定義，源碼中使用了 commander.js 來具體實(shí)現(xiàn)缀辩。并且調(diào)用各種 js 來命令行對應(yīng)的具體功能踪央。
看看 vue add 的具體步驟
async function add (pluginName, options = {}, context = process.cwd()) {
// 安裝 vue-router 和 vuex
if (/^(@vue\/)?router$/.test(pluginName)) {
return addRouter(context)
}
if (/^(@vue\/)?vuex$/.test(pluginName)) {
return addVuex(context)
}
const packageName = resolvePluginId(pluginName)
log()
log(`?? Installing ${chalk.cyan(packageName)}...`)
log()
const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')
// 安裝插件
await installPackage(context, packageManager, null, packageName)
stopSpinner()
log()
log(`${chalk.green('?')} Successfully installed plugin: ${chalk.cyan(packageName)}`)
log()
// 獲取插件
const generatorPath = resolveModule(`${packageName}/generator`, context)
if (generatorPath) {
// 調(diào)用插件
invoke(pluginName, options, context)
} else {
log(`Plugin ${packageName} does not have a generator to invoke`)
}
}
和我在介紹插件時說的一樣瓢阴，add 執(zhí)行了安裝和調(diào)用兩個步驟來添加插件~.
另外比較有意思的是這個 chalk 模塊，可以讓 cmd 打印出不同顏色的 log荣恐。我們在 cmd 中看到五顏六色的命令行就靠它了。
總結(jié)下腳手架項(xiàng)目
看了下源碼募胃，從我的認(rèn)知出發(fā)說下腳手架的具體做法旗唁。
- 使用 commander.js 來定義命令行痹束。
- 使用命令行執(zhí)行腳本進(jìn)行相關(guān)操作。
- 使用 node 的 log 來展示安裝情況祷嘶、進(jìn)度屎媳，甚至是做一些選擇操作论巍。
- 搭建項(xiàng)目其實(shí)也是從服務(wù)器下載來的模板項(xiàng)目。
-
vue ...命令本質(zhì)上就是執(zhí)行腳本的行為嘉汰。 - 腳手架可以使用 npm 和 yarn 幫我們安裝好依賴包。
- 五顏六色的 log 來自于 chalk 模塊
最后
至此鞋怀，我們了解了 vue-cli 的豐富的各種功能的使用和原理，也簡單介紹了類似這種腳手架的創(chuàng)建形式下次讓我們自己搭個腳手架玩玩
最后打個內(nèi)推廣告
鏈家上海研發(fā)中心招聘前端密似、后端、測試残腌，主要負(fù)責(zé)貝殼找房社區(qū)服務(wù)相關(guān)的開發(fā)工作。
機(jī)會不多抛猫，需要內(nèi)推機(jī)會的請將簡歷發(fā)送至 dingxiaojie001@ke.com。
