基于 Vue3 + TDesign Mobile + Vite + 腾讯云开发的移动端 Web 应用
| 层级 | 技术 |
|---|---|
| 框架 | Vue 3 (Composition API) |
| UI 库 | TDesign Mobile Vue |
| 状态管理 | Pinia |
| 路由 | Vue Router 4 |
| 构建 | Vite |
| 样式 | SCSS (Design Tokens) |
| 后端 | 腾讯云开发 CloudBase (云函数 + 云数据库) |
| 部署 | CNB 云原生构建 |
- Node.js >= 18
- npm >= 9
# 克隆仓库
git clone https://cnb.cool/cnbmm/lhzx-h5.git
cd lhzx-h5
# 安装依赖
npm install
# 配置环境变量
cp .env.example .env
# 编辑 .env 填入 CloudBase 环境 ID
# 启动开发服务器
npm run dev
# 生产构建
npm run build
# 预览构建结果
npm run preview
lhzx-h5/ ├── cloudfunctions/ # 云函数（后端逻辑） ├── database/ # 云数据库集合配置 ├── public/ # 静态资源 ├── src/ │ ├── assets/ # 图片等资源 │ ├── components/ # 通用组件 │ ├── layouts/ # 布局组件 │ ├── pages/ # 页面模块 │ ├── router/ # 路由配置 │ ├── stores/ # Pinia 状态仓库 │ ├── styles/ # 全局样式 & Design Tokens │ └── utils/ # 工具函数 ├── .env.example # 环境变量模板 ├── cloudbaserc.json # CloudBase 配置 ├── vite.config.js # Vite 配置 └── package.json
| 变量 | 说明 |
|---|---|
VITE_CLAUDBASE_ENV | CloudBase 环境ID |
VITE_CLAUDBASE_REGION | 地域，默认 ap-shanghai |
项目使用腾讯云 CloudBase 作为后端服务：
- 认证: CloudBase 匿名/微信登录
- 数据库: 云数据库（集合定义见
database/目录） - 函数: 云函数（见
cloudfunctions/目录） - 存储: 云存储（静态资源托管）
| 函数名 | 说明 | 超时 | 内存 |
|---|---|---|---|
| login | 登录/注册 | 10s | 256MB |
| getUserInfo | 获取用户信息 | 5s | 128MB |
| createOrder | 新建报单 | 10s | 256MB |
| getOrderList | 报单列表（分页+筛选） | 10s | 256MB |
| reviewOrder | 审核报单 | 10s | 256MB |
| getCourseList | 课程列表（分页+筛选+搜索） | 10s | 256MB |
| getCourseDetail | 课程详情+章节目录 | 10s | 256MB |
| enrollCourse | 报名课程（含支付/积分抵扣） | 15s | 256MB |
| getMessages | 消息列表 | 10s | 256MB |
| getServiceList | 服务套餐列表 | 5s | 128MB |
| 集合 | 说明 |
|---|---|
| users | 用户信息 |
| courses | 课程数据 |
| chapters | 课程章节 |
| enrollments | 报名记录 |
| orders | 报单数据 |
| services | 服务套餐 |
| coupons | 优惠券 |
| messages | 消息记录 |
# 1. 登录 CloudBase
tcb login
# 2. 部署云函数
tcb fn deploy --force
# 3. 上传数据库集合规则
tcb db import --collection users --file database/users.schema.json
# 4. 构建并部署前端
cd cloudbase
tcb hosting deploy --dir ../dist
Q: 本地开发如何连接 CloudBase？
A: 在 .env 文件中配置 VITE_CLAUDBASE_ENV 为你的 CloudBase 环境 ID，开发服务器会自动连接。
Q: 云函数修改后如何更新？
A: 修改 cloudfunctions/ 下的代码后，运行 tcb fn deploy --force 重新部署对应云函数。
Q: 如何添加新页面？
A: 在 src/pages/ 下创建新目录，添加 .vue 文件，然后在 src/router/index.js 中注册路由。
Q: 数据库 schema 在哪里管理？
A: 数据库集合的 JSON Schema 定义在 database/ 目录下，文件名格式为 {集合名}.schema.json。
Q: 构建产物有多大？如何优化？
A: Vite 默认会进行 Tree-shaking 和代码分割。如需进一步优化，可在 vite.config.js 中配置 splitChunks 策略。
MIT
About
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
