commit 8204e215e7df7bf65f0fbb945c8dcb7cd024904a Author: LeoAnn <1297441823@qq.com> Date: Thu Dec 11 17:44:55 2025 +0800 feat: 首次提交 diff --git a/README.md b/README.md new file mode 100644 index 0000000..30ee31d --- /dev/null +++ b/README.md @@ -0,0 +1,222 @@ +# msmg-uni + +基于 UniApp 框架构建的微信小程序移动应用,采用 Vue 3 + TypeScript + Vite + UnoCSS + uview-plus 现代化技术栈。 + +## 🚀 快速开始 + +### 环境要求 + +- Node.js >= 16.0.0 +- pnpm (推荐) 或 npm +- 微信开发者工具 + +### 安装依赖 + +```bash +# 使用 pnpm (推荐) +pnpm install + +# 或使用 npm +npm install +``` + +### 开发环境 + +```bash +# 启动微信小程序开发 +npm run dev:mp-weixin +``` + +### 生产构建 + +```bash +# 构建微信小程序 +npm run build:mp-weixin +``` + +### 类型检查 + +```bash +# 运行 TypeScript 类型检查 +npm run type-check +``` + +## 📁 项目结构 + +``` +src/ +├── @api/ # API 层和服务定义 +├── @layout/ # 布局组件 (PageTitle, RootView) +├── components/ # 可复用的 Vue 组件 +├── common/ # 全局工具函数和常量 +├── hooks/ # Vue 3 组合式函数 +├── pages/ # 应用页面 +├── stores/ # Pinia 状态管理 +├── static/ # 静态资源 +├── utils/ # 工具函数 +├── App.vue # 根应用组件 +├── main.ts # 应用入口文件 +├── pages.json # UniApp 页面配置 +└── manifest.json # 平台特定应用配置 +``` + +## 🛠️ 技术栈 + +| 技术 | 版本 | 说明 | +|------|------|------| +| **UniApp** | 3.x | 跨平台开发框架 | +| **Vue 3** | ^3.4.21 | 渐进式 JavaScript 框架 | +| **TypeScript** | ^4.9.4 | JavaScript 超集,提供类型安全 | +| **Vite** | 5.2.8 | 现代化前端构建工具 | +| **Pinia** | 2.0.36 | Vue 3 状态管理库 | +| **uview-plus** | ^3.6.17 | UniApp 生态 UI 组件库 | +| **UnoCSS** | - | 原子化 CSS 引擎 | +| **vue-i18n** | ^9.1.9 | 国际化解决方案 | + +## 📋 开发规范 + +### 编码风格 + +1. **条件语句** - 尽可能使用 `if return` 代替 `if else` +2. **注释** - 代码结构清晰,关键地方需要中文注释 +3. **引号** - 使用单引号替代双引号 +4. **参数传递** - 函数参数尽量使用解构赋值 +5. **分号** - 行结尾禁止添加分号 + +### 文件命名规范 + +| 文件类型 | 命名规范 | 示例 | +|----------|----------|------| +| API 文件 | `*.api.ts` | `user.api.ts` | +| Vue 组件 | PascalCase | `PageBack.vue` | +| 组合函数 | `*.use.ts` | `useAuth.use.ts` | +| 状态管理 | `*.store.ts` | `user.store.ts` | +| 类型定义 | 按类别组织 | `/types/dto/`, `/types/vo/` | +| 其他文件 | `xxx-xxx.xxx` | `user-info.ts` | + +### 导入规范 + +- 使用绝对导入:`import { http } from '@/utils/http'` +- `@/` 指向 `./src/` (在 vite.config.ts 中配置) + +### Vue 组件结构 + +```vue + + + + + +``` + +### 页面结构 + +- 根组件统一使用 `` 包装 +- 页面标题使用 `` 组件 +- 布局组件位于 `/src/@layout/` 目录 + +### HTTP 请求 + +使用统一的 HTTP 工具: + +```typescript +import { http } from '@/utils/http' + +// GET 请求示例 +const getUserInfo = async (userId: string) => { + return http.get(`/api/users/${userId}`) +} + +// POST 请求示例 +const createUser = async (userData: CreateUserDto) => { + return http.post('/api/users', userData) +} +``` + +### 状态管理 + +使用 Pinia 进行状态管理: + +```typescript +import { defineStore } from 'pinia' + +export const useUserStore = defineStore('user', { + state: () => ({ + userInfo: null as UserInfo | null, + token: '' + }), + actions: { + async login(credentials: LoginDto) { + // 登录逻辑 + }, + logout() { + this.userInfo = null + this.token = '' + } + } +}) +``` + +## 🎨 样式规范 + +### UnoCSS 使用 + +- 使用原子化 CSS 类进行样式开发 +- 集成 Tabler 图标:`i-tabler-*` +- 支持自定义主题色彩变量 + +### 主题色彩 + +```scss +// 使用 CSS 变量 +color: var(--primary-color); +background: var(--bg-color); +``` + +## 🔧 构建配置 + +### Vite 配置特性 + +- UnoCSS 集成与微信小程序预设 +- SCSS 预处理支持 +- Vue JSX 支持 +- 路径别名配置 + +### TypeScript 配置 + +- Vue 3 TypeScript 支持 +- UniApp 类型定义 +- 清理导入的路径映射 +- 启用严格模式 + +### 查询建议 + +- 遇到 API 使用问题时,优先使用 Context7 查询最新文档 +- 可以指定 `topic` 参数查询特定主题,如:`topic="composition-api"` +- 对于具体组件,可以直接查询相关主题:`topic="u-button"` + +### Git 提交规范 + +- `feat:` 新功能 +- `fix:` 修复 bug +- `docs:` 文档更新 +- `style:` 代码格式调整 +- `refactor:` 代码重构 +- `test:` 测试相关 +- `chore:` 构建过程或辅助工具的变动