Dedsi Vue3 项目技能
本文档概述了项目的架构、技术栈和开发指南。
1. 技术栈
- 框架: Vue 3 (Composition API)
- 构建工具: Vite (使用
rolldown-vite) - 语言: TypeScript
- 状态管理: Pinia
- 路由: Vue Router
- 样式: UnoCSS
- HTTP 客户端: Axios
- 可视化: AntV G2
- 图标: @ant-design/icons-vue
- 工具库: Day.js, QRCode
2. 项目结构
源代码位于 src 目录下，组织结构如下：
| 目录 | 描述 |
|---|---|
src/apiServices | API 集成和服务层（Axios 封装）。 |
src/components | 可复用的 UI 组件。 |
src/configs | 项目级配置。 |
src/layouts | 页面布局（例如：BasicLayout 基本布局）。 |
src/router | 路由配置。index.ts 为入口，子模块位于 modules 目录。 |
src/stores | 用于全局状态管理的 Pinia stores。 |
src/utils | 辅助函数和工具类。 |
src/views | 对应路由的页面组件。 |
src/App.vue | Vue 根组件。 |
src/main.ts | 应用程序入口点。 |
3. 配置亮点
UnoCSS (uno.config.ts)
项目使用 UnoCSS 进行原子化样式开发，包含以下预设：
presetUno: 默认 UnoCSS 工具集。presetAttributify: 支持属性化模式。presetIcons: 纯 CSS 图标。presetTypography: 排版预设。presetWebFonts: 网络字体（例如：'Inter'）。
自定义快捷方式 (Shortcuts):
flex-center:flex items-center justify-center(弹性布局居中)flex-between:flex items-center justify-between(两端对齐)glass-card-base:bg-white/70 backdrop-blur-md border border-white/30 rounded-16 shadow-lg(毛玻璃卡片基类)
主题:
- 主色调 (Primary Color):
#1677ff
脚本 (package.json)
dev: 启动开发服务器 (vite).build: 类型检查并构建生产版本 (vue-tsc -b && vite build).preview: 本地预览生产构建 (vite preview).
4. 开发指南
核心原则
- 组件优先: 研发时优先使用
src/components下的现有组件，避免重复开发。 - 样式优先: CSS 布局必须优先使用 UnoCSS，仅在必要时编写自定义 CSS。
状态管理
使用 Pinia 进行全局状态管理。Store 文件位于 src/stores。
API 调用
所有 API 逻辑应封装在 src/apiServices 中。避免在组件通过 Axios 直接调用接口。
样式
使用 UnoCSS 工具类。对于复杂或重复的样式，请使用已定义的快捷方式或在 uno.config.ts 中创建新的快捷方式。 示例：
<div class="flex-center glass-card-base">
内容
</div>脚本设置
所有 Vue 组件都应使用 <script setup lang="ts">，以利用组合式 API 和 TypeScript 支持。
路由管理
路由采用模块化管理，定义在 src/router/modules 目录下。
- 模块化: 每个业务功能模块（如 Dashboard, AI Chat, User）应有独立的路由配置文件。
- 配置: 在
src/router/index.ts中导入并聚合这些模块。 - 结构: 保持
index.ts简洁，仅包含核心路由配置和守卫逻辑。