6、从零配置到高可控：构建你的前端脚手架🪜 写在前面作为架构师，让团队“快速创建一个新项目”是你的基本能力之一。无

🪜 写在前面

作为架构师，让团队“快速创建一个新项目”是你的基本能力之一。 无论是搭建后台系统、组件库、移动端项目，还是微前端子应用，一个优秀的脚手架都能：

保证项目结构统一
提升开发效率
降低新成员学习成本
减少重复配置和代码污染

本篇我们将：

从 0 构建一个 Vue3 + Vite 的脚手架工具
加入模板选项（PC/移动端/组件库）
自动安装依赖 + Git 初始化
打包为命令行工具，全公司可用

📁 一、目录结构与目标预览

create-app-cli/
├── bin/
│   └── index.js            # CLI 入口
├── templates/
│   ├── vue3-pc/            # PC 模板项目
│   ├── vue3-mobile/        # 移动端模板
│   └── lib-component/      # 组件库模板
├── utils/
│   └── copyDir.js          # 目录复制工具
├── package.json

最终效果：

npx create-app-cli my-project

控制台交互：

请选择项目类型：
❯ Vue3 PC 管理后台
  Vue3 移动端 H5
  Vue3 组件库模板

⚙️ 二、核心代码实现

✅ 1. 创建 bin/ 脚本

// bin/index.js
#!/usr/bin/env node

import inquirer from 'inquirer'
import fs from 'fs-extra'
import path from 'path'
import { fileURLToPath } from 'url'
import { copyTemplate } from '../utils/copyDir.js'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const choices = [
  { name: 'Vue3 PC 管理后台', value: 'vue3-pc' },
  { name: 'Vue3 移动端 H5', value: 'vue3-mobile' },
  { name: 'Vue3 组件库模板', value: 'lib-component' },
]

const { projectName } = await inquirer.prompt([
  { type: 'input', name: 'projectName', message: '请输入项目名称' },
])

const { template } = await inquirer.prompt([
  { type: 'list', name: 'template', message: '请选择模板', choices },
])

const targetPath = path.join(process.cwd(), projectName)
const templatePath = path.join(__dirname, '../templates', template)

await copyTemplate(templatePath, targetPath)

console.log(`\n✅ 项目创建成功：cd ${projectName} && npm install\n`)

✅ 2. 实现 utils/copyDir.js

import fs from 'fs-extra'

export async function copyTemplate(src, dest) {
  await fs.copy(src, dest)
}

✅ 3. 设置执行权限

在 package.json 添加：

"bin": {
  "create-app-cli": "bin/index.js"
}

并执行：

chmod +x bin/index.js

发布前测试：

npm link
create-app-cli my-demo

📦 三、模板项目样例（vue3-pc）

vue3-pc/
├── public/
├── src/
│   ├── views/
│   ├── components/
│   ├── utils/
│   ├── App.vue
│   └── main.ts
├── vite.config.ts
├── .eslintrc.js
├── .prettierrc
└── package.json

内置内容：

Vite + TypeScript
eslint + prettier + husky
UI 组件库（Naive UI）
Axios 封装、API 示例
Toast、权限指令、国际化

🧠 思路：模板并不是越大越好，而是提供 80% 的结构，让团队有约束空间又能自由扩展。

🎁 四、进阶玩法（可拓展功能）

功能	实现方式
支持 React/Next 模板	`templates/react-pc`、多选框
多语言模板提示	使用 `chalk` + `figlet` 美化 CLI
版本控制自动初始化	在 `copyTemplate` 后执行 `git init`
自动安装依赖	自动执行 `npm install` 或 `pnpm i`
模板版本更新提示	使用 `update-notifier` 检测版本
支持远程拉取模板	使用 degit 克隆 GitHub 模板

✅ 五、项目应用建议

公司内多个项目统一使用该脚手架创建
搭配 CI/CD pipeline + commitlint/husky 自动化质量保障
每月更新模板，沉淀通用能力（如 Layout、权限、菜单、表格、埋点等）

🧩 六、对比 create-vite / vue-cli / create-next-app

工具	特点	控制粒度	扩展性	企业推荐
`create-vite`	轻量，零配置	⭐⭐	⭐⭐	通用
`vue-cli`	大而全，有点重	⭐	⭐	低
`create-app-cli`（自建）	按需定制，可配置模板	⭐⭐⭐	⭐⭐⭐	✅ ✅ ✅

🧠 总结一句话

一个好的前端架构师，不仅会写业务，更懂如何构建体系让所有人快速高质量地写业务。