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

TDesign Mobile Vue Starter Community

项目简介

本项目是基于 TDesign Mobile Vue 的移动端页面模板,采用 Vue3、Vite、TypeScript 构建,集成了 Pinia 状态管理、Vue Router 路由、Axios 网络请求等,适合作为移动端中后台或通用场景的前端起步项目。

技术栈

目录结构

tdesign-mobile-vue-starter-community/
├── public/                  # 公共资源
├── src/
│   ├── api/                 # API 请求封装
│   ├── assets/              # 静态资源与样式
│   ├── components/          # 公共组件
│   │   ├── header/          # 头部组件
│   │   ├── sider/           # 侧边栏组件
│   │   └── tabBar/          # 底部导航栏组件
│   ├── pages/               # 页面模块
│   │   ├── home/            # 首页相关页面
│   │   ├── messages/        # 消息中心页面
│   │   ├── profile/         # 个人中心及子页面
│   │   └── ...              # 其他页面
│   ├── router/              # 路由配置
│   ├── stores/              # Pinia 状态管理
│   ├── utils/               # 工具函数
│   ├── App.vue              # 应用主入口
│   └── main.ts              # 入口文件
├── types/                   # 类型声明
├── package.json             # 项目依赖与脚本
├── tsconfig*.json           # TypeScript 配置
└── vite.config.ts           # Vite 配置

主要功能模块

  • 首页:应用入口页面,展示核心信息
  • 消息中心:集中展示各类消息通知
  • 个人中心:用户信息、历史记录、偏好设置等
  • 设置中心:应用个性化配置(如通知、主题等)
  • 登录注册:支持多种登录方式

启动方式

  1. 安装依赖:
    npm install
    
  2. 本地开发启动:
    npm run dev
    
  3. 打包构建:
    npm run build
    
  4. 预览构建产物:
    npm run preview
    

路由说明

  • 默认访问 / 会自动跳转到 /home
  • 主要页面路由:
    • /home 首页
    • /messages 消息中心
    • /profile 个人中心
    • /profile/settings 设置中心
    • /login 登录注册

其他

  • 推荐使用 VSCode + Volar 插件进行开发体验。
  • 代码风格统一,集成 ESLint 和 Prettier。

About

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

Language
TypeScript61%
Vue24.7%
Markdown12.3%
HTML1.8%
Others0.2%