logo
0
0
WeChat Login
Forkfromtencent/tdesign/tdesign-mobile-vue-starter-community, aheadmain2 commits, behindmain3 commits

TDesign Mobile Vue Starter

Vue 3 TDesign Mobile Vite License: MIT

基于 TDesign Mobile Vue 的移动端应用模板,提供开箱即用的基础架构与功能模块。

🌟 特性

  • 用户认证系统:完整的登录/权限控制流程
  • 多模块集成:消息中心、个人中心、数据统计等核心功能
  • 现代化技术栈:Vue 3 + TypeScript + Vite 开发体验
  • 响应式设计:适配主流移动端设备
  • 组件化开发:内置全局导航栏、抽屉组件等可复用UI

🛠️ 技术栈

类别技术
前端框架Vue 3 + Composition API
UI 组件库TDesign Mobile Vue
状态管理Pinia
路由管理Vue Router 4
构建工具Vite 4
代码规范ESLint + Prettier

🚀 快速开始

环境要求

  • Node.js ≥ 16.x
  • npm ≥ 8.x 或 pnpm ≥ 7.x

安装与运行

# 安装依赖
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

About

TDesign Mobile Vue 页面模板 - 社区内容类

Language
Vue79%
TypeScript13%
Markdown5%
CSS1.4%
Others1.6%