{"id":17099953,"url":"https://github.com/kuangpf/vue-cli-analysis","last_synced_at":"2025-04-06T03:10:18.506Z","repository":{"id":41203433,"uuid":"157338434","full_name":"KuangPF/vue-cli-analysis","owner":"KuangPF","description":"vue-cli 源码分析 (vue-cli3)","archived":false,"fork":false,"pushed_at":"2022-10-21T15:25:42.000Z","size":8723,"stargazers_count":374,"open_issues_count":0,"forks_count":61,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T02:07:03.598Z","etag":null,"topics":["cli","node-command-line","vue","vue-cli","vue-cli3"],"latest_commit_sha":null,"homepage":"https://kuangpf.com/vue-cli-analysis/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KuangPF.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-13T07:29:22.000Z","updated_at":"2025-03-06T22:31:41.000Z","dependencies_parsed_at":"2022-09-13T08:30:54.724Z","dependency_job_id":null,"html_url":"https://github.com/KuangPF/vue-cli-analysis","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fvue-cli-analysis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fvue-cli-analysis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fvue-cli-analysis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fvue-cli-analysis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KuangPF","download_url":"https://codeload.github.com/KuangPF/vue-cli-analysis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","node-command-line","vue","vue-cli","vue-cli3"],"created_at":"2024-10-14T15:11:51.258Z","updated_at":"2025-04-06T03:10:18.483Z","avatar_url":"https://github.com/KuangPF.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-cli 源码分析\n\n![@vue/cli](https://img.shields.io/badge/@vue/cli-v3.1.3-42b983.svg) ![@vue/cli-service](https://img.shields.io/badge/@vue/cli--service-v3.1.4-42b983.svg) ![node-version](https://img.shields.io/badge/node-v8.11.4-brightgreen.svg) ![platform](https://img.shields.io/badge/platform-macOS%20%EF%A3%BF-000000.svg) ![Github action](https://github.com/KuangPF/vue-cli-analysis/workflows/Deploy%20to%20GitHub%20Pages/badge.svg) ![License](https://img.shields.io/github/license/KuangPF/vue-cli-analysis.svg) \n\n## 写在前面\n\n其实最开始不是特意来研究 `vue-cli` 的源码，只是想了解下 `node` 的命令，如果想要了解 `node` 命令的话，那么绕不开 [tj](https://github.com/tj) 写的 [commander.js](https://github.com/tj/commander.js)。在学习 [commander.js](https://github.com/tj/commander.js) 过程中发现 `vue-cli` 的交互方式挺炫酷的，然后就去看了下源码，所以就有了这个仓库。\n\n**慎重提醒：我对 `vue-cli` 的源码以及其中的一些知识点并不熟悉，如果我对其中的知识点非常了解的话我就不会来分析了，分析源码只是想更加了解 `vue-cli` 整个工具的实现过程以及 `vue-cli3` 的一些新特性。如果文中有描述有误，还请各位大大 issues or PR**。\n\n## 相关说明\n\n[vue-cli](https://github.com/vuejs/vue-cli/tree/dev/packages) 仓库 dev 分支下面 package 目录包含了 `cli`，`cli-service`，`CLI 插件`，`UI 插件`，`cli 工具函数`代码等等。本项目中的 package 文件夹里面对其中的代码有一定的注释，主要集中在 `cli`，`cli-service` 上，有兴趣的同学可以 fork 后查看。\n\n## 目录\n\n### @vue/cli\n\n* **前言**\n  * [介绍](https://kuangpf.com/vue-cli-analysis/foreword/)\n* **开始**\n  * [环境介绍](https://kuangpf.com/vue-cli-analysis/start/env.html/)\n  * [常见 npm 包](https://kuangpf.com/vue-cli-analysis/start/npm.html/)\n* **vue create**\n  * [create 入口](https://kuangpf.com/vue-cli-analysis/create/)\n  * [整体分析](https://kuangpf.com/vue-cli-analysis/create/overall-analysis.html)\n  * [基础验证](https://kuangpf.com/vue-cli-analysis/create/basic-verification.html)\n  * [获取预设选项（preset）](https://kuangpf.com/vue-cli-analysis/create/get-preset.html)\n  * [依赖安装（installDeps）](https://kuangpf.com/vue-cli-analysis/create/install-deps.html)\n  * [Generator](https://kuangpf.com/vue-cli-analysis/create/create/generator.html#)\n  * [结尾分析](https://kuangpf.com/vue-cli-analysis/create/end-part.html)\n  * [总结](https://kuangpf.com/vue-cli-analysis/create/summary.html)\n* **vue add**\n  * [add 入口](https://kuangpf.com/vue-cli-analysis/add/)\n  * [安装插件](https://kuangpf.com/vue-cli-analysis/add/plugin-install.html)\n  * [调用插件](https://kuangpf.com/vue-cli-analysis/add/plugin-invoke.html)\n  * [总结](https://kuangpf.com/vue-cli-analysis/add/summary.html)\n* **vue invoke**\n  * [invoke 命令](https://kuangpf.com/vue-cli-analysis/invoke/)\n* **vue inspect**\n  * [inspect 命令](https://kuangpf.com/vue-cli-analysis/inspect/)\n* **vue serve**\n  * [serve 命令](https://kuangpf.com/vue-cli-analysis/serve/)\n* **vue build**\n  * [build 命令](https://kuangpf.com/vue-cli-analysis/build/)\n* **vue ui**\n  * [ui 入口](https://kuangpf.com/vue-cli-analysis/ui/)\n  * [整体分析](https://kuangpf.com/vue-cli-analysis/ui/overall-analysis.html)\n  * [server 端](https://kuangpf.com/vue-cli-analysis/ui/server.html)\n  * [client 端](https://kuangpf.com/vue-cli-analysis/ui/client.html)\n  * [总结](https://kuangpf.com/vue-cli-analysis/ui/summary.html)\n* **vue init**\n  * [init 入口](https://kuangpf.com/vue-cli-analysis/init/)\n  * [@vue/cli-init 分析](https://kuangpf.com/vue-cli-analysis/init/vue-cli-init-module.html)\n  * [vue-cli 2.x init 分析](https://kuangpf.com/vue-cli-analysis/init/vue-cli-init-2.x.html)\n  * [generate 函数分析](https://kuangpf.com/vue-cli-analysis/init/generate.html)\n  * [总结](https://kuangpf.com/vue-cli-analysis/init/summary.html)\n* **vue config**\n  * [config 命令](https://kuangpf.com/vue-cli-analysis/config/)\n* **vue upgrade**\n  * [upgrade 命令](https://kuangpf.com/vue-cli-analysis/upgrade/)\n* **vue info**\n  * [info 命令](https://kuangpf.com/vue-cli-analysis/info/)\n\n### @vue/cli-service\n\n* **整体介绍**\n  * [入口](https://kuangpf.com/vue-cli-analysis/cli-service/entrance.html)\n  * [new Service()](https://kuangpf.com/vue-cli-analysis/cli-service/new-service.html)\n  * [service.run()](https://kuangpf.com/vue-cli-analysis/cli-service/service-run.html)\n* **内置插件**\n  * [serve](https://kuangpf.com/vue-cli-analysis/cli-service/serve.html)\n  * [build](https://kuangpf.com/vue-cli-analysis/cli-service/build.html)\n  * [inspect](https://kuangpf.com/vue-cli-analysis/cli-service/inspect.html)\n  * [help](https://kuangpf.com/vue-cli-analysis/cli-service/help.html)\n\n\n## 请作者喝杯咖啡☕️\n\n如果觉得文章对你有所帮助，不如请作者喝杯咖啡 ☕️\n\n\u003cimg width=200 src='https://user-images.githubusercontent.com/20694238/75290073-9a76cf80-585a-11ea-8c14-730274b9987d.jpg' /\u003e \u003cimg width=205 src='https://user-images.githubusercontent.com/20694238/75290080-9d71c000-585a-11ea-8976-bed1ea2c8550.jpg' /\u003e\n\n## 总结\n\nvue-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 源码是一个不错的选择。\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuangpf%2Fvue-cli-analysis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuangpf%2Fvue-cli-analysis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuangpf%2Fvue-cli-analysis/lists"}