vue-cli 3.0 源码分析

10次阅读

共计 871 个字符,预计需要花费 3 分钟才能阅读完成。

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

正文完
 0