基于 Vue 2 + TypeScript + Webpack (Vue CLI) + TDesign Uniapp 的跨端移动应用开发模板,支持 H5、微信小程序、支付宝小程序等多平台。
- 🎨 TDesign 组件库 - 腾讯出品的企业级设计体系
- 📦 开箱即用 - 完整的项目结构和配置
- 🔧 TypeScript - 完整的类型支持
- ⚡ Vue CLI + Webpack - 稳定成熟的构建体验
- 🌐 多平台支持 - H5 / 微信 / 支付宝 / 抖音 / QQ / 百度 / 快手 / 京东 / 小红书等
- Node.js: >= 14.0.0
- npm: >= 6.0.0
# 克隆项目
git clone https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-cli.git
# 进入项目目录
cd tdesign-uniapp-starter-vue2-cli
# 安装依赖
npm install
# 启动 H5 开发
npm run dev:h5
# 启动微信小程序开发
npm run dev:mp-weixin| 平台 | 命令 |
|---|---|
| H5 | npm run dev:h5 |
| 微信小程序 | npm run dev:mp-weixin |
| 支付宝小程序 | npm run dev:mp-alipay |
| 抖音小程序 | npm run dev:mp-toutiao |
| QQ 小程序 | npm run dev:mp-qq |
| 百度小程序 | npm run dev:mp-baidu |
| 快手小程序 | npm run dev:mp-kuaishou |
| 京东小程序 | npm run dev:mp-jd |
| 飞书小程序 | npm run dev:mp-lark |
| 小红书小程序 | npm run dev:mp-xhs |
| 鸿蒙元服务 | npm run dev:mp-harmony |
| 平台 | 命令 |
|---|---|
| H5 | npm run build:h5 |
| 微信小程序 | npm run build:mp-weixin |
| 支付宝小程序 | npm run build:mp-alipay |
| 抖音小程序 | npm run build:mp-toutiao |
| QQ 小程序 | npm run build:mp-qq |
| 百度小程序 | npm run build:mp-baidu |
| 快手小程序 | npm run build:mp-kuaishou |
| 京东小程序 | npm run build:mp-jd |
| 飞书小程序 | npm run build:mp-lark |
| 小红书小程序 | npm run build:mp-xhs |
| 鸿蒙元服务 | npm run build:mp-harmony |
开发和构建命令传递 --alias,即可使用本地的 tdesign-uniapp 和 tdesign-uniapp-chat,否则会使用 npm 中的相应包。
npm run dev:h5 -- --alias
npm run dev:mp-weixin -- --alias├── src/
│ ├── components/ # 公共组件
│ ├── mixins/ # 混入
│ ├── pages/ # 主页面目录
│ ├── pages-more/ # 更多页面(组件示例)
│ ├── static/ # 静态资源
│ ├── style/ # 全局样式
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ ├── pages.json # 页面路由配置
│ ├── manifest.json # 应用配置
│ └── uni.scss # uni-app 全局样式变量
├── public/ # 公共资源
├── babel.config.js # Babel 配置
├── vue.config.js # Vue CLI 配置
├── postcss.config.js # PostCSS 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目依赖
