2025-09-11 【工程化】Vue3脚手架搭建

自研脚手架（CLI）是提升团队开发效率、统一技术栈规范的关键手段。在 Monorepo 架构或管理 20 个子应用的场景下，一个好的脚手架能自动化完成从“项目创建”到“发布部署”的全生命周期。

以下是自研脚手架的核心架构与实现步骤：

---

1. 脚手架的工作原理

脚手架本质上是一个运行在 Node.js 环境下的 命令行工具。其核心逻辑通常分为三步：

1. 交互（Inquiry）：通过命令行询问用户需求（如：应用名称、是否集成 Pinia 等）。
2. 下载/生成（Templates）：根据选择，从远程仓库下载模板或从本地读取文件。
3. 渲染/处理（Processing）：利用模板引擎（如 Handlebars）替换变量，最终生成目标项目代码。

---

2. 核心技术栈选型

要开发一个现代化的脚手架，你通常需要以下“全家桶”：

库名称	作用
commander	核心框架：处理命令行参数、版本号、帮助信息。
inquirer 或 prompts	交互工具：实现选择框、输入框等命令行交互。
chalk	样式工具：让命令行输出带颜色，区分成功（绿）和失败（红）。
ora	加载动画：显示 Loading 效果（如“正在下载模板…”）。
fs-extra	文件操作：增强版的 fs，支持递归删除、复制等。
execa	执行命令：用于自动运行 pnpm install 等 Shell 命令。

---

3. 实现步骤：从零搭建

第一步：初始化项目

创建一个新目录，并在 package.json 中配置 bin 字段，这是定义命令名称的关键。

{
  "name": "my-cli",
  "version": "1.0.0",
  "bin": {
    "my-cli": "./bin/index.js"
  }
}

第二步：编写入口文件

在 ./bin/index.js 头部必须加上 #! /usr/bin/env node，告诉系统用 Node 执行。

#! /usr/bin/env node
const { program } = require("commander");

program
  .command("create <app-name>")
  .description("创建一个新的子应用")
  .action((name) => {
    // 这里执行具体的逻辑
    console.log(`正在创建应用：${name}`);
  });

program.parse(process.argv);

第三步：实现交互逻辑

使用 inquirer 获取用户偏好。

const inquirer = require("inquirer");

async function create(name) {
  const answer = await inquirer.prompt([
    {
      type: "list",
      name: "template",
      message: "请选择项目模板",
      choices: ["Nuxt 3 Admin", "Vue 3 Mobile", "Electron App"],
    },
  ]);
  // 根据 answer.template 去拉取对应的代码
}

---

4. 模板管理策略

• 方案 A：远程仓库下载（推荐用于跨团队）：
  使用 download-git-repo 直接从 GitHub/GitLab 拉取代码。优点是模板更新不需要升级脚手架版本。
• 方案 B：本地内置模板（推荐用于 Monorepo）：
  将模板代码存在脚手架源码中。优点是创建速度极快，离线可用，且容易与脚手架逻辑深度耦合。

---

5. 高阶进阶建议

脚手架不仅要能“创建”，还要能“治理”：

1. 自动化注入路由/配置：
   创建新应用后，脚手架应自动修改根目录的 pnpm-workspace.yaml 或主应用的 routes.ts，实现真正的“一键接入”。
2. Lint 规范强制化：
   在生成的项目中预置好团队统一的 .eslintrc.js 和 commitlint.config.js。
3. 版本依赖对齐：
   脚手架在创建项目时，可以自动检测主项目中的 Vue/Nuxt 版本，确保新子应用的依赖版本与大环境一致，避免 Monorepo 出现依赖冲突。

---

6. 发布与测试

1. 本地测试：在脚手架目录下执行 npm link，即可在全局直接使用 my-cli 命令。
2. 正式发布：执行 npm publish 到私有 NPM 仓库。团队成员只需 npm install -g my-cli 即可使用。