写在前面
其实最开始不是特意来研究 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 源码是一个不错的选择。