摘要：最近在学习 Node 相关的东西，根据视频中的内容写出了一个自定义 CLI 工具，主要用于快速生成 Vue 项目骨架及相关组件（如页面、路由、Store 等），简化 Vue 项目的初始化和开发流程。通过命令行指令，可快速克隆项目模板、创建组件、页面+路由配置、
最近在学习 Node 相关的东西，根据视频中的内容写出了一个自定义 CLI 工具，主要用于快速生成 Vue 项目骨架及相关组件（如页面、路由、Store 等），简化 Vue 项目的初始化和开发流程。通过命令行指令，可快速克隆项目模板、创建组件、页面+路由配置、Store 配置等。
02.LEARN_CLI/├── index.js├── package.json├── lib/│ ├── core/│ │ ├── actions.js│ │ ├── create.js│ │ ├── help.js #技术分享│ ├── config/│ │ ├── repo-config.js│ ├── utils/│ │ ├── terminal.js│ │ ├── utils.js作用：CLI 工具的入口，初始化命令行解析器并加载配置核心逻辑： 引入 commander 库处理命令行指令 注册版本号（从 package.json 读取）加载帮助信息（ helpOptions ）和自定义命令（ createCommands ）解析进程参数（ process.argv ）#!/usr/bin/env nodeconst program = require("commander");const helpOptions = require("./lib/core/help");const createCommands = require("./lib/core/create");program.version(require("./package.json").version); helpOptions; createCommands; program.parse(process.argv);作用：定义 CLI 支持的所有指令，并关联对应的执行逻辑（actions）支持的命令： create：创建项目 addcpn ：添加 Vue 组件addpage
：添加 Vue 页面及路由配置addstore ：添加 Vue Store 配置program.command("create
[others...]").description("clone repository into a folder").action(createProjectAction);const createProjectAction = async (project) => {await download(vueRepo, project, { clone: true });const command = process.platform === "win32" ? "npm.cmd" : "npm";await commandSpawn(command, ["install"], { cwd: `./${project}` });commandSpawn(command, ["run", "serve"], { cwd: `./${project}` });open("http://localhost:8080/");};（2） addComponentAction ：添加 Vue 组件流程： 使用 EJS 编译 vue-component.ejs 模板（传入组件名及小写组件名） 将编译结果写入指定目录（默认 src/components ）的 .vue 文件const addComponentAction = async (name, dest) => {const result = await compile("vue-component.ejs", { name, lowerName: name.toLowerCase })const targetPath = path.resolve(dest, `${name}.vue`)writeToFile(targetPath, result)}流程： 编译 vue-store.ejs （Store 模板）和 vue-types.ejs （类型定义模板） 创建以 Store 名为目录的文件夹写入 Store 文件（ .js ）和类型定义文件（ types.js ）const vueRepo = 'direct:https://gitee.com/leilei521/hy-vue-temp.git'module.exports = { vueRepo }封装 child_process.spawn 为 Promise 形式，方便异步执行终端命令（如 npm install ）核心函数 commandSpawn ：将子进程的输出（stdout/stderr）管道到主进程，并在命令完成后 resolveconst commandSpawn = (...args) => {return new Promise((resolve) => {const childProcess = spawn(...args);childProcess.stdout.pipe(process.stdout);childProcess.on("close", => resolve);});};作用：定义 CLI 的帮助选项和额外说明自定义选项： -l --llg ：自定义标识 -d --dest ：指定目标目录（如组件/页面的生成路径）-f --framework ：指定框架额外帮助信息：通过 program.on("--help") 添加补充说明五、使用示例创建项目 ：llg create my-vue-project添加组件 ：llg addcpn Button -d src/components # 在 src/components 生成 Button.vue添加页面及路由 ：llg addpage Home -d src/views添加 Store ：llg addstore user -d src/store查看帮助 ：llg --help六、核心技术点
该 CLI 工具通过封装常用的 Vue 项目开发流程（初始化、组件创建、路由配置等），提高了开发效率。核心逻辑是将重复的手动操作（如克隆模板、编写基础组件代码）通过命令行自动化，同时支持自定义路径，灵活适配不同项目结构。
来源：墨码行者一点号