whuzyx/tdesign-mobile-vue-starter-community

Public

WeChat Login

Code ISSUE Pull requests Events Packages Insights

main

Branch

Tag

Forkfromtencent/tdesign/tdesign-mobile-vue-starter-community, aheadmain5 commits, behindmain3 commits

zyx<3783176275@qq.com>

docs: 完善文档配置说明

1226028b

11 commits

.github
.vite
public
src
.cnb.yml
.env
.env.development
.gitignore
README.md
components.d.ts
eslint.config.ts
index.html
package-lock.json
package.json
tsconfig.json
untitled.iml
vite.config.ts

TDesign 移动端页面模板

tdesign-mobile-vue-starter-community 是一个基于 TDesign Mobie Vue 移动端组件库，使用 Vue3、Vite、TypeScript 开发，包含首页、消息中心、个人中心、设置中心、登陆注册等五大功能模块，可进行个性化主题配置的纯前端页面模版。

首页：该模块是用户进入应用的第一印象，需要展示核心功能和信息，引导用户进行下一步操作；
消息中心：该模块负责集中展示各类消息通知，方便用户及时了解动态；
个人中心：该模块是用户管理个人信息、查看历史发布记录、设置偏好等的集中区域；
设置中心：该模块允许用户对应用的各项功能进行个性化配置，如通知设置、主题切换等；
登陆注册：该模块是用户进入应用的入口，需要提供便捷、安全的登录注册方式，如验证码登陆、账号密码登录、第三方账号授权等。

视觉稿地址

移动端通用场景页面模版：https://codesign.qq.com/s/567449555703953

访问密码：F2FO

安装使用

系统环境
Windows 或 macOS
推荐 IDE：VSCode
Node.js 版本在 20 或以上（npm 会随 Node.js 一同安装）
安装依赖

npm install

如果遇到 npm :无法加载文件xxx，因为在此系统上禁止运行脚本... 问题，请以管理员的身份打开 PowerShell 并输入以下命令

set-ExecutionPolicy RemoteSigned

输入 Y 后确定即可

运行

npm run dev

打包

npm run build
# 打包 & 分析
npm run report

预览

npm run preview
# 打包 & 预览
npm run preview:build

开发指南

技术栈

Vue: 版本为 3.5+
Vue Router
Tdesign Mobile Vue: 腾讯 UI 组件库
Vite: 新一代前端构建工具
ESLint: 项目采用了@antfu/eslint-config，统一代码风格和质量

目录结构

├── .github/                # 工作流相关配置
├── public/                 # 公共静态资源（直接拷贝，无需编译）
│   ├── dialog/             # 对话页切图
│   ├── home/               # 首页切图
│   ├── mine/               # 我的页切图
│   └── favicon.ico
├── src/                    # 业务核心代码
│   ├── router/             # 路由配置
│   │   └── index.ts        # 路由表 + 守卫配置
│   ├── modules/            # 模块化业务拆分（按功能/页面聚合）
│   │   ├── auth/           # 权限模块（登录）
│   │   ├── components/     # 模块专属组件
│   │   ├── home/           # 首页模块
│   │   ├── layout/         # 布局模块
│   │   ├── message/        # 消息模块
│   │   ├── profile/        # 个人中心模块
│   │   └── settings/       # 设置模块
│   ├── App.vue             # 根组件（挂载路由、全局布局）
│   └── main.ts             # 应用入口（初始化 Vue、注入全局配置）
├── .cnb.yml                # 工作流相关配置
├── .env                    # 全局环境变量（通用配置）
├── .gitignore              # Git 忽略规则
├── eslint.config.ts        # ESLint 代码规范校验
├── eslintrc-auto-import.json # 自动导入 ESLint 配置
├── index.html              # 页面入口模板（Vite 入口）
├── package.json            # 项目依赖 & 脚本
├── package-lock.json       # 依赖版本锁
├── README.md               # 项目说明（启动、部署、目录规范）
├── tsconfig.json           # TypeScript 业务代码配置
├── tsconfig.node.json      # TypeScript 工具链配置（Vite 等）
└── vite.config.ts          # Vite 构建配置（插件、别名、环境变量）