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或以上，如果没有，请到 官网 下载安装或更新 -
pnpm包管理器，如果没有，请运行以下命令来进行安装npm install -g pnpm
-
-
📥 安装依赖
pnpm install
如果遇到
pnpm :无法加载文件xxx，因为在此系统上禁止运行脚本...问题，请以管理员的身份打开PowerShell并输入以下命令set-ExecutionPolicy RemoteSigned
输入
Y后确定即可 -
🚀 运行
pnpm dev
-
📦 打包
pnpm build # 打包 & 分析 pnpm report -
👀 预览
pnpm preview # 打包 & 预览 pnpm preview:build
-
Vue: 版本为
3.5+ -
Vue I18n: 国际化配置
-
Tdesign Mobile Vue: 腾讯 UI 组件库
-
Vite: 新一代前端构建工具
值得一提的是，
Vite 7不再支持node 18详情>> -
ESLint: 项目采用了@antfu/eslint-config，统一代码风格和质量
-
TailwindCSS: 原子化 CSS 框架，极大提升开发效率和样式复用性，项目采用了
TailwindCSS v4
├── .github/ # 工作流相关
├── .husky/ # git 的一些 commit 前校验
├── .vscode/ # vscode 的一些个性化配置项
│ ├── extensions.json # vscode 插件相关配置
│ ├── launch.json # 调试配置
│ ├── setting.json # 个性化配置
│ └── vue.code-snippets # 快速代码片段
├── build/ # 构建相关配置项
│ ├── info.ts # 构建信息相关
│ ├── plugins.ts # vite 插件相关处理
│ └── utils.ts # 构建相关工具库
├── locales/ # 国际化文件目录
├── public/ # 公共文件目录
│ ├── config.json # 项目全局配置项
│ └── favicon.ico
├── src/ # 业务代码目录
│ ├── config/ # 处理全局配置
│ ├── directives/ # 自定义指令
│ │ └── ...
│ ├── layout/ # 布局相关
│ │ └── ...
│ ├── plugins/ # 插件相关
│ │ └── i18n.ts # 国际化配置插件
│ ├── router/ # 路由配置
│ │ └── ...
│ ├── store/ # 状态管理相关配置
│ │ └── ...
│ ├── style/ # 公共样式目录
│ │ ├── index.scss # 全局样式
│ │ ├── reset.scss # 重置样式
│ │ └── tailwind.css # TailwindCSS 相关配置
│ ├── utils/ # 工具函数相关
│ │ └── ...
│ ├── views/ # 业务页面
│ │ └── ...
│ ├── App.vue
│ ├── main.ts
├── types/ # 全局类型相关
│ ├── auto-imports.d.ts # unplugin-auto-import 自动生成
│ ├── components.d.ts # unplugin-vue-components 自动生成
│ ├── global.d.ts # 全局样式
│ ├── shims-tsx.d.ts # ts 默认不认 tsx，在此补充
│ ├── shims-vue.d.ts # ts 默认不认 vue、scss，在此补充
│ └── vue-router.d.ts # unplugin-vue-router 自动生成
├── .browserslistrc # 浏览器环境限制
├── .cnb.yml # 工作流相关
├── .env # 全局环境变量
├── .env.development # 开发环境有效
├── .env.production # 打包环境有效
├── .gitignore # git 忽略文件配置
├── .lintstagedrc # git commit 前的校验配置
├── .npmrc # 包管理器相关配置
├── .nvmrc # nvm 相关配置
├── commitlint.config.js # git commit 校验配置
├── eslint.config.js # 语法检查配置
├── index.html # 页面主入口
├── package.json # 依赖包版本及启动配置
├── pnpm-lock.yaml # 依赖包版本锁文件
├── postcss.config.js # postcss 相关配置
├── README.md # 自述文件
├── tsconfig.json # ts 配置
├── vite.config.ts # vite 配置
-
unplugin-vue-components: 自动导入第三方组件，无需手动import -
unplugin-vue-router: 自动检测src/views目录下的结构，生成路由 -
unplugin-auto-import: 自动导入第三方函数，无需手动import -
code-inspector-plugin: 浏览器内按住Alt+Shift可以定位组件代码位置，非常方便调试（Mac 则为Option+Shift） -
jsx语法支持 -
国际化支持
-
目录下的
.env*文件可对各环境进行个性化配置 -
可通过
public/config.json来对平台进行外部配置 -
在
.vue空文件里输入vue可弹出代码片段，快速搭建基础文件结构（仅限vscode）
以下基于 vue 提交规范编写
-
feat业务新功能开发 -
fixbug 修复 -
polish微调、润色代码或 UI，不影响逻辑（如命名优化、视觉细节调整） -
docs文档、注释相关 -
style修改代码风格（格式化、空格、分号等相关，非 CSS） -
refactor重构相关（函数拆分、hook 调整等等） -
perf业务代码优化（涉及到逻辑变更，非构建相关） -
test测试相关 -
workflow工作流相关 -
ci持续集成相关 -
chore杂项变更，不影响代码逻辑（如依赖更新、构建脚本修改） -
types类型相关 -
revert撤销修改 -
build构建相关变更，例如 webpack/vite 配置修改 -
release版本发布相关 -
wip开发中
推荐使用内核为 chrome 100+ 的浏览器开发
不支持 IE 🤡