基于 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 策略。

• 领航小程序 — 微信小程序端
• 化工知识库 — RAG 知识库
• 数字员工看板 — 可视化看板

MIT