vue-cli 3.0 源碼分析

寫在前面

其實最開始不是特地來研究 vue-cli 的源碼，只是想了解下 node 的命令，若是想要了解 node 命令的話，那麼繞不開 tj 寫的 commander.js。在學習 commander.js 過程當中發現 vue-cli 的交互方式挺炫酷的，而後就去看了下源碼，因此就有了這篇文章。

連接

vue-cli 3.0 源碼分析

目錄

@vue/cli

• 前言

  • 介紹

• 開始

  • 環境介紹
  • 常見 npm 包

• vue create

  • create 入口
  • 總體分析
  • 基礎驗證
  • 獲取預設選項（preset）
  • 依賴安裝（installDeps）
  • Generator
  • 結尾分析
  • 總結

• vue add

  • add 入口
  • 安裝插件
  • 調用插件
  • 總結

• vue invoke

  • invoke 命令

• vue inspect

  • inspect 命令

• vue serve

  • serve 命令

• vue build

  • build 命令

• vue ui

  • ui 入口
  • 總體分析
  • server 端
  • client 端
  • 總結

• vue init

  • init 入口
  • @vue/cli-init 分析
  • vue-cli 2.x init 分析
  • generate 函數分析
  • 總結

• vue config

  • config 命令

• vue upgrade

  • upgrade 命令

• vue info

  • info 命令

@vue/cli-service

• 總體介紹

  • 入口
  • new Service()
  • service.run()

• 內置插件

  • serve
  • build
  • inspect
  • help

總結

vue-cli-analysis 整個項目可大體分爲兩個部分，一部分是 vue 命令分析，包含 create，add，invoke， ui 等等，另外一部分就是 vue-cli-service 的分析。經過分析發現與 2.X 相比，3.0 變化太大了，經過引入插件系統，可讓開發者利用其暴露的 API 對項目進行擴展。在分析以前對插件機制不是很瞭解，不知道如何實現的，分析以後逐漸瞭解了其實現機制，並且對於 vue 項目的配置也更加熟悉了。除此以外，在分析過程過程當中還了解了不少有意思的 npm 包，好比 execa， debug， lowdb，lodash，inquirer 等等，最後，若是你想學習 node 命令或者想寫一些比較有意思的命令行工具的話，閱讀 vue-cli 源碼是一個不錯的選擇。