vue-cli 源码分析

写在前面

其实最开始不是特意来研究 vue-cli 的源码，只是想了解下 node 的命令，如果想要了解 node 命令的话，那么绕不开 tj 写的 commander.js。在学习 commander.js 过程中发现 vue-cli 的交互方式挺炫酷的，然后就去看了下源码，所以就有了这个仓库。

慎重提醒：我对 vue-cli 的源码以及其中的一些知识点并不熟悉，如果我对其中的知识点非常了解的话我就不会来分析了，分析源码只是想更加了解 vue-cli 整个工具的实现过程以及 vue-cli3 的一些新特性。如果文中有描述有误，还请各位大大 issues or PR。

相关说明

vue-cli 仓库 dev 分支下面 package 目录包含了 cli，cli-service，CLI 插件，UI 插件，cli 工具函数代码等等。本项目中的 package 文件夹里面对其中的代码有一定的注释，主要集中在 cli，cli-service 上，有兴趣的同学可以 fork 后查看。

目录

@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 源码是一个不错的选择。