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 源碼是一個不錯的選擇。