create-sf-vue/README.md

一个基于 Vite + Vue3 的项目模板脚手架，支持 TypeScript 和 JavaScript。

# 🚀 Vue 企业级开发模板脚手架

一个基于 **Vite + Vue3** 构建的现代化项目模板脚手架，支持 **TypeScript** 和 **JavaScript**。它内置了企业级项目开发所需的规范化工具和最佳实践配置，帮助你快速搭建统一、高效、可维护的应用。

## 🛠️ 模板技术栈与特性

- ⚡ **构建工具**: Vite - 极速的现代前端构建工具
- 🖼️ **前端框架**: Vue 3 - 渐进式 JavaScript 框架
- 📘 **语言**: TypeScript / JavaScript - 支持类型约束或原生JS开发
- 📦 **包管理器**: pnpm（强制使用）
- 🎨 **UI 组件库**:
  - **Element Plus** (在 TypeScript 模板中使用)
- 💅 **CSS 方案**: UnoCSS - 即时按需的原子化 CSS 引擎
- ⚙️ **API 请求**: 基于 Axios 的二次封装，支持请求/响应拦截
- 🗃️ **状态管理**: Pinia - Vue 官方推荐的状态管理库

### 🧩 插件系统

- **unplugin-auto-import**: 自动导入 API，解放双手
- **unplugin-vue-components**: 自动导入组件

### 🧹 代码规范

- ESLint + Prettier - 统一代码风格与语法校验
- Stylelint - 统一的样式规范化工具

### 🐶 Git 工作流

- Husky + lint-staged - Git hooks 工具，保障提交质量
- Commitlint - 校验 Git commit 信息格式

### 📄 环境配置

- `.env` 文件支持，区分开发和生产环境
- EditorConfig + .gitattributes - 统一编辑器编码格式与换行符规范

## 📁 生成的项目结构

```
├── dist/ # 打包输出目录
├── src/ # 源码目录
│ ├── api/ # API 请求模块
│ ├── components/ # 全局公共组件
│ ├── router/ # 路由配置
│ ├── assets/ # 静态资源
│ ├── store/ # Pinia 全局状态管理
│ ├── styles/ # 全局样式
│ ├── types/ # (TypeScript版) 类型定义
│ ├── utils/ # 工具库 (如 request 封装)
│ ├── views/ # 页面视图
│ ├── App.vue # 应用根组件
│ └── main.ts / main.js # 入口文件
├── .husky/ # Git hooks 配置
├── .vscode/ # VSCode 编辑器推荐配置
├── .editorconfig # 编辑器统一格式配置
├── .stylelintrc.cjs # Stylelint 配置
├── commitlint.config.cjs # Commitlint 配置
├── eslint.config.mjs / .mts # ESLint 配置
├── prettier.config.mjs # Prettier 配置
├── tsconfig.json / jsconfig.json # TS/JS 配置
├── unocss.config.ts / .js # UnoCSS 配置
├── vite.config.ts / .js # Vite 项目配置
├── pnpm-lock.yaml # pnpm 锁定文件
└── package.json # 项目依赖和脚本
```

## ⚙️ 快速开始

### 安装脚手架

```
# 全局安装本脚手架
npm install -g create-sf-vue
```

### 创建项目

```
# 使用脚手架创建新项目
create-sf-vue [你的项目名]
```

### 安装依赖

推荐使用 **pnpm**（也可用 `npm install` 或 `yarn install`）：

```
# 进入项目目录
cd [你的项目名]

# 安装依赖
pnpm install
```

### 启动开发

```
pnpm dev
```

### 项目构建

```
pnpm build
```

## ✅ 提交规范

本模板集成了 husky + commitlint，在执行 `git commit` 时会自动校验 commit 信息格式。

推荐格式： `<类型>(作用域): 描述` 例如： `feat(login): add login form validation`

#### 常用类型参考

| 类型       | 说明                   |
| ---------- | ---------------------- |
| `feat`     | 新增功能               |
| `fix`      | 修复 Bug               |
| `docs`     | 仅文档变更             |
| `style`    | 代码格式（不影响功能） |
| `refactor` | 代码重构               |
| `perf`     | 性能优化               |
| `test`     | 新增或修改测试         |
| `chore`    | 构建/工程配置相关      |
| `revert`   | 代码回退               |
| `build`    | 影响构建系统或外部依赖 |