UniApp Vue3 Cloud 项目

基于 uni-app + Vue3 + TypeScript + 云函数的跨平台应用项目模板

技术栈

• 框架：Vue 3 + TypeScript + uni-app
• 状态管理：Pinia
• UI组件：uview-plus
• 构建工具：Vite
• CSS预处理器：SCSS
• 包管理器：pnpm
• 后端服务：uni-app 云函数

支持平台

• 微信小程序
• H5
• Web
• App

项目结构

├── src # 源码目录
│ ├── api # API 接口定义
│ ├── components # 公共组件
│ ├── composables # 组合式函数
│ ├── pages # 页面文件
│ ├── static # 静态资源
│ ├── store # Pinia 状态管理
│ ├── styles # 全局样式
│ ├── types # TypeScript 类型定义
│ └── utils # 工具函数
├── cloudfunctions # 云函数目录
│ ├── common # 公共模块
│ └── business # 业务模块
├── .gitignore # Git 忽略文件
├── package.json # 项目配置文件
├── tsconfig.json # TypeScript 配置
└── vite.config.ts # Vite 配置

## 开发环境要求

- Node.js >= 16
- pnpm >= 7
- 微信开发者工具（如需开发小程序）

## 快速开始

1. 克隆项目

开发规范

命名规范

• 文件夹命名：kebab-case
• 组件命名：PascalCase
• 变量命名：camelCase
• 常量命名：UPPER_SNAKE_CASE

代码规范

• 使用 TypeScript 进行开发
• 使用 Composition API 和 <script setup> 语法
• 遵循 ESLint 和 Prettier 配置
• 组件属性顺序：name -> props -> emits -> setup

Git 提交规范

格式：<type>(<scope>): <subject>

type 类型：

• feat: 新功能
• fix: 修复
• docs: 文档
• style: 格式
• refactor: 重构
• test: 测试
• chore: 构建

云函数开发

1. 创建云函数

性能优化

• 图片资源大小 <= 200KB
• 首屏加载时间 <= 3s
• 合理使用组件复用
• 按需加载

安全规范

• API 接口需要鉴权
• 敏感数据加密
• 使用安全存储

部署

1. 微信小程序

• 在微信开发者工具中上传代码
• 在小程序管理后台发布

2. H5/Web

• 使用常规部署方式部署 dist 目录

常见问题

1. 开发工具配置问题

• 确保 Node.js 版本正确
• 检查包管理器版本

2. 跨平台兼容性问题

• 参考 uni-app 条件编译说明
• 使用跨平台组件库

贡献指南

1. Fork 项目
2. 创建特性分支
3. 提交代码
4. 发起 Pull Request

许可证

MIT License