基于 TDesign Mobile Vue 的移动端应用模板,提供开箱即用的基础架构与功能模块。
| 类别 | 技术 |
|---|---|
| 前端框架 | Vue 3 + Composition API |
| UI 组件库 | TDesign Mobile Vue |
| 状态管理 | Pinia |
| 路由管理 | Vue Router 4 |
| 构建工具 | Vite 4 |
| 代码规范 | ESLint + Prettier |
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
## 📂 目录结构
tdesign-mobile-vue-starter-community/
├── public/ # 静态资源
├── src/
│ ├── api/ # API接口
│ ├── assets/ # 项目资源
│ ├── components/ # 公共组件
│ │ ├── globalNavBar # 全局导航栏
│ │ ├── pageDrawer # 页面抽屉
│ │ └── tabBar # 底部导航栏
│ ├── pages/ # 页面组件
│ │ ├── index # 首页
│ │ ├── search # 搜索页
│ │ ├── publish # 发布页
│ │ ├── messages # 消息中心
│ │ ├── chat # 聊天页
│ │ ├── userCenter # 个人中心
│ │ ├── userInfo # 用户信息
│ │ ├── settings # 设置中心
│ │ ├── statistics # 数据统计
│ │ └── login # 登录页
│ ├── stores/ # 状态管理
│ ├── styles/ # 全局样式
│ ├── utils/ # 工具函数
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
└── vite.config.ts # Vite配置
## 🧩 功能模块
模块 功能描述 关键组件
用户认证 登录/权限控制/用户状态管理 Login.vue
首页 内容展示/全局导航/发布入口 GlobalNavBar.vue
消息中心 消息列表/实时聊天/通知系统 Chat.vue
个人中心 用户资料编辑/设置管理 UserInfo.vue
数据统计 数据可视化/区域分析/完播率 Statistics.vue