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