create-wl-app

外观

AI Skills 集成更新 ​

更新时间：2026-03-06

本文档说明 vite_react_init 和 vite_vue3_init 两个项目模板的最新更新内容。

✨ 核心更新内容 ​

1. Trae 编辑器 AI Skills 集成 ​

两个项目模板均已集成基于 Trae 编辑器 的 AI 开发 skills，大幅提升 AI 辅助开发效率。

vite_react_init Skills ​

Skill 名称说明
react-best-practicesReact 最佳实践指南
ahooksReact Hooks 库使用指南（含 76+ hooks）
ant-designAnt Design 6.x 组件使用指南
viteVite 8 构建工具配置与 Rolldown 迁移指南
unocssUnoCSS 原子化 CSS 引擎配置

vite_vue3_init Skills ​

Skill 名称说明
vueVue 3 Composition API 使用指南
vueuse-functionsVueUse 组合式函数库（900+ 函数）
element-plusElement Plus 组件库使用指南
viteVite 8 构建工具配置与 Rolldown 迁移指南
unocssUnoCSS 原子化 CSS 引擎配置

2. 项目规则文档更新 ​

vite_react_init 规则要点 ​

markdown
### 核心框架
- React 19.2.4
- React DOM 19.2.4
- React Router DOM 7.13.0
- Zustand 5.0.11
- Ant Design 6.2.3

### 开发规范
- 不使用 TypeScript
- 组件命名使用 PascalCase
- 样式使用原子化 CSS Unocss
- 优先使用 Ant Design 组件
- API 调用统一封装在 src/apis/ 目录

### 性能注意
- 避免组件中直接使用复杂计算，优先使用 useMemo
- 避免不必要的重渲染，合理使用 React.memo
- 避免渲染函数中大量 DOM 操作

vite_vue3_init 规则要点 ​

markdown
### 核心框架
- Vue 3.5.27
- Vue Router 5.0.2
- Pinia 3.0.4
- Element Plus 2.13.2

### 开发规范
- 不使用 TypeScript
- 组件命名使用 PascalCase
- 样式使用原子化 CSS Unocss
- 优先使用 Element Plus 组件
- API 调用统一封装在 src/apis/ 目录

### 性能注意
- 避免模板中直接使用复杂计算
- 避免渲染函数中大量 DOM 操作

📁 Skills 目录结构 ​

vite_react_init ​

.trae/
├── rules/
│   └── project_rules.md          # 项目规则文档
└── skills/
    ├── ahooks/                   # ahooks React hooks 库
    │   ├── references/           # 参考文档
    │   └── SKILL.md              # Skill 定义
    ├── ant-design/               # Ant Design 组件库
    ├── react-best-practices/     # React 最佳实践
    ├── unocss/                   # UnoCSS 配置
    └── vite/                     # Vite 构建工具

vite_vue3_init ​

.trae/
├── rules/
│   └── project_rules.md          # 项目规则文档
└── skills/
    ├── element-plus/             # Element Plus 组件库
    ├── vue/                      # Vue 3 框架
    ├── vueuse-functions/         # VueUse 组合式函数
    ├── unocss/                   # UnoCSS 配置
    └── vite/                     # Vite 构建工具

🚀 使用方式 ​

启动开发服务器 ​

bash
# vite_react_init
cd vite_react_init
npm install
npm run start

# vite_vue3_init
cd vite_vue3_init
npm install
npm run dev

使用 AI Skills ​

在 Trae 编辑器中开发时，AI 会自动调用相应的 skills：

  • 新建组件: 调用对应框架的 best practices skill
  • 使用 UI 组件: 调用 Ant Design / Element Plus skill
  • 配置 Vite: 调用 Vite skill
  • 使用 Hooks: 调用 ahooks / vueuse-functions skill
  • 样式编写: 调用 UnoCSS skill

享受开发，构建美好！ 🎉