logo
0
0
Login
Forkfromtencent/tdesign/tdesign-mobile-vue-starter-community, ahead:main2 commits, behind:main2 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%