My-Notes

006.从零配置到高可控：构建你的前端脚手架

5分钟阅读

出处：掘金

原作者：金泽宸

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

写在前面

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

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

本篇我们将：

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

目录结构与目标预览

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 组件库模板

核心代码实现

创建 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`)

实现 utils/copyDir.js

import fs from 'fs-extra'
 
export async function copyTemplate(src, dest) {
  await fs.copy(src, dest)
}

设置执行权限

在 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（自建）按需定制，可配置模板⭐⭐⭐⭐⭐⭐✅ ✅ ✅

关系图谱