msmg-uni

基于 UniApp 框架构建的微信小程序移动应用，采用 Vue 3 + TypeScript + Vite + UnoCSS + uview-plus 现代化技术栈。

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• pnpm (推荐) 或 npm
• 微信开发者工具

安装依赖

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

开发环境

# 启动微信小程序开发
npm run dev:mp-weixin

生产构建

# 构建微信小程序
npm run build:mp-weixin

类型检查

# 运行 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 组件结构

<template>
  <!-- 使用 uview-plus 组件的模板 -->
  <RootView>
    <PageTitle title="页面标题" />
    <view class="container">
      <!-- 页面内容 -->
    </view>
  </RootView>
</template>

<script setup lang="ts">
// TypeScript 组合式 API
import { ref, onMounted } from 'vue'
</script>

<style lang="scss" scoped>
// UnoCSS 工具类的作用域样式
.container {
  @apply flex flex-col p-4;
}
</style>

页面结构

• 根组件统一使用 <RootView /> 包装
• 页面标题使用 <PageTitle /> 组件
• 布局组件位于 /src/@layout/ 目录

HTTP 请求

使用统一的 HTTP 工具：

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 进行状态管理：

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-*
• 支持自定义主题色彩变量

主题色彩

// 使用 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: 构建过程或辅助工具的变动