项目指南

这是基于 Vue Vben Admin 的前端项目，使用 Vue 3 + TypeScript + Vite + Ant Design Vue。

技术栈

• 框架: Vue 3.5 + TypeScript 6.0
• 构建工具: Vite 8.0
• UI 组件: Ant Design Vue 4.2
• 状态管理: Pinia 3.0 + persistedstate
• 路由: Vue Router 5.1
• 表单验证: VeeValidate + Zod
• HTTP 客户端: Axios
• 样式: Tailwind CSS 4.3 + SCSS
• 图表: ECharts 6.1
• 富文本编辑器: TinyMCE 7.9, Tiptap 3.26
• 流程图: BPMN.js 18.16

项目结构

src/
├── api/              # API 接口定义
├── components/       # 公共组件
├── composables/      # 组合式函数
├── layouts/          # 布局组件
├── locales/          # 国际化
├── router/           # 路由配置
├── stores/           # Pinia 状态管理
├── styles/           # 全局样式
├── utils/            # 工具函数
└── views/            # 页面组件

开发命令

# 开发
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm typecheck

# 预览构建结果
pnpm preview

代码规范

组件命名

• 组件文件使用 PascalCase: UserList.vue
• 组件 name 使用 PascalCase: defineOptions({ name: 'UserList' })

TypeScript

• 禁止使用 any 类型
• Props 和 Emits 必须定义 TypeScript 接口
• 使用 import type 导入类型

Vue 组件

• 统一使用 <script setup lang="ts"> 语法
• Props 使用 withDefaults + defineProps<T>()
• Emits 使用 defineEmits<T>()

样式

• 优先使用 Tailwind CSS 类
• 组件样式使用 scoped
• 颜色使用 CSS 变量

可用命令

• /vue-component - 创建新的 Vue 组件
• /vue-page - 创建新的页面
• /api-service - 创建 API 服务模块
• /pinia-store - 创建 Pinia 状态存储

可用技能

• vue3-development - Vue 3 开发规范
• antd-vue-components - Ant Design Vue 组件模式
• frontend-code-review - 前端代码审查指南

注意事项

1. 路径别名 #/* 指向 ./src/*
2. 使用 VeeValidate + Zod 进行表单验证
3. 使用 v-dompurify-html 处理用户输入的 HTML
4. 敏感数据使用 secure-ls 加密存储