換個(gè)角度學(xué)習(xí) VUE CLI 3

簡介

vue cli 3 是一個(gè)類似于 create-react-app 的可以用例命令行快速配置和生成一個(gè) vue 項(xiàng)目。]vue cli 3 與之前版本最大的幾個(gè)變化變化是：

  • 選擇項(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í)是一個(gè) 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 插件，具體請看文檔。
簡單說下插件安裝
注意安裝插件是有簡寫的，到安裝的時(shí)候會補(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

以上兩個(gè)命令會為項(xiàng)目安裝 vue-router 和 vuex，并且改變項(xiàng)目目錄結(jié)構(gòu)以便更快的進(jìn)行路由和狀態(tài)管理的開發(fā)操作。

vue cli 的插件在哪里找？都有哪些官方插件？源碼在哪里？

其實(shí)這些插件是放在了 npm 中的，和其他模塊類似。下面是從尤大的npm中找到的插件包：

這些插件項(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)用中配置各個(gè)頁面入口文件
  • lintOnSave —— eslint 是否在保存行為的時(shí)候檢查代碼。默認(rèn)為 warning，如果配置為 error 則有錯(cuò)誤直接報(bào) eslint 錯(cuò)誤。
  • 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 —— 這是一個(gè)不經(jīng)過任何模式驗(yàn)證的對象，因此它可以用于將任意選項(xiàng)傳遞給第三方插件。比如寫一個(gè) options.pluginOptions.foo 插件配置對象隨時(shí)調(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 頁面，在這個(gè)頁面中可以進(jìn)行插件安裝、依賴庫查看、命令執(zhí)行、全局配置、項(xiàng)目導(dǎo)入等操作。很有意思，值得一玩。

界面詳情

vue-cli 源碼簡單介紹

vue cli 項(xiàng)目內(nèi)容還是很多的，大概包括了：

  • cli
  • cli service
  • vue plugin
  • utils
  • ui（就是個(gè) 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`)
  }
}

和我在介紹插件時(shí)說的一樣，add 執(zhí)行了安裝和調(diào)用兩個(gè)步驟來添加插件~.
另外比較有意思的是這個(gè) 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)建形式下次讓我們自己搭個(gè)腳手架玩玩

最后打個(gè)內(nèi)推廣告

鏈家上海研發(fā)中心招聘前端、后端、測試，主要負(fù)責(zé)貝殼找房社區(qū)服務(wù)相關(guān)的開發(fā)工作。
機(jī)會不多，需要內(nèi)推機(jī)會的請將簡歷發(fā)送至 dingxiaojie001@ke.com。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容