Skip to content

KuangPF/vue-cli-analysis

Repository files navigation

vue-cli 源码分析

@vue/cli @vue/cli-service node-version platform Github action License

写在前面

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

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

相关说明

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

目录

@vue/cli

@vue/cli-service

请作者喝杯咖啡☕️

如果觉得文章对你有所帮助,不如请作者喝杯咖啡 ☕️

总结

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