# uniapp-vue3-ts-template **Repository Path**: OpenBodhi/uniapp-vue3-ts-template ## Basic Information - **Project Name**: uniapp-vue3-ts-template - **Description**: 这是一个基于 UniApp + Vue 3 + TypeScript + Vite 的现代化跨平台应用开发模板,集成了多种实用工具和最佳实践,适用于快速开发iOS、Android、H5、小程序等多端应用。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-10-05 - **Last Updated**: 2025-10-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

UniApp Vue3 TypeScript 模板

UniApp Vue3 Vite TypeScript UnoCss License

## 简介 这是一个基于 UniApp + Vue 3 + TypeScript + Vite 的现代化跨平台应用开发模板,集成了多种实用工具和最佳实践,适用于快速开发iOS、Android、H5、小程序等多端应用。此模板在uniapp官方模板[vite-ts](https://github.com/dcloudio/uni-preset-vue/tree/vite-ts)上进行加强。 ## 文档 [请查看文档](https://blog.csdn.net/ou5157/article/details/152552961) ## 开发说明 pages目录下均为测试页面,都可删除,此外还要删除pages.json的页面配置。 ## 分支 | 分支 | 说明 | github地址 | gitee地址 | | ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | master | master分支没有集成ui组件库,其他技术栈均集成,可自行添加ui组件 | [github](https://github.com/BingoEco/uniapp-vue3-ts-template) | [gitee](https://gitee.com/BingoEco/uniapp-vue3-ts-template) | | uni-ui | 在master分支的基础上,集成DCloud官方UI组件库,全端适配 | [github](https://github.com/BingoEco/uniapp-vue3-ts-template/tree/uni-ui) | [gitee](https://gitee.com/BingoEco/uniapp-vue3-ts-template/tree/uni-ui/) | | wot-ui | 在master分支的基础上,集成Wot UI组件库 | [github](https://github.com/BingoEco/uniapp-vue3-ts-template/tree/wot-ui) | [gitee](https://gitee.com/BingoEco/uniapp-vue3-ts-template/tree/wot-ui/) | ## 技术栈 - [UniApp](https://uniapp.dcloud.io/) - 跨平台应用开发框架 - [Vue 3](https://v3.vuejs.org/) - 渐进式 JavaScript 框架,使用 Composition API - [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集,添加了静态类型 - [Vite](https://vitejs.dev/) - 快速的构建工具,提供极速的开发体验 - [EditorConfig](https://editorconfig.org/) - 跨编辑器和IDE的代码格式一致性工具 - [Prettier](https://prettier.io/) - 代码格式化工具 - [ESLint](https://eslint.org/) - JavaScript/TypeScript代码检查工具 - [Stylelint](https://stylelint.io/) - CSS/SCSS代码检查工具 - [Husky](https://typicode.github.io/husky/) - Git hooks工具 - [Lint-staged](https://github.com/okonet/lint-staged) - 对暂存的git文件运行linters的工具 - [Commitlint](https://commitlint.js.org/) - Git commit信息校验工具 - [UnoCSS](https://unocss.dev/) - 即时按需原子 CSS 引擎 - [Pinia](https://pinia.vuejs.org/) - Vue 的轻量级状态管理库 - [Day.js](https://day.js.org/) - 轻量级日期处理库 - [Lodash](https://lodash.com/) - JavaScript 工具库 - [z-paging](https://github.com/SmileZXLee/uniapp-z-paging) - UniApp 下拉刷新和上拉加载插件 - [Auto Import](https://github.com/antfu/unplugin-auto-import) - 自动按需导入 API - [dcloudio/uni-preset-vue](https://github.com/dcloudio/uni-preset-vue/tree/vite-ts) - UniApp官方vue3-ts模板 - [uni-network](https://github.com/uni-helper/uni-network) - 为 uni-app 打造的基于 Promise 的 HTTP 客户端 - [uni-ui](https://uniapp.dcloud.io/component/uniui/uni-ui) - DCloud官方UI组件库,提供丰富的移动端组件 - [wot-ui](https://github.com/Moonofweisheng/wot-ui) - 基于Vue3+TS开发的uni-app组件库,轻量、简洁 ## 功能演示页面 项目包含了多个功能演示页面: - 首页 (index) - 功能演示列表 (demo) - Pinia 状态管理演示 (pinia) - UnoCSS 样式演示 (unocss) - Day.js 日期处理演示 (dayjs) - z-paging 分页组件演示 (zpaging) - Lodash 工具库演示 (lodash) - 网络请求演示 (request) ## 演示效果 ![](./demo.gif) ## 快速开始 ### 环境要求 - Node.js >= 20 - pnpm (推荐) / npm / yarn - vcode ### 克隆项目 ```bash # gitee git clone https://gitee.com/BingoEco/uniapp-vue3-ts-template.git # github git clone https://github.com/BingoEco/uniapp-vue3-ts-template.git ``` ### 安装依赖 ```bash cd uniapp-vue3-ts-template pnpm install ``` ### 开发环境 ```bash # 启动 H5 开发环境 pnpm run dev:h5 # 启动微信小程序开发环境 pnpm run dev:mp-weixin # 启动其他平台(将PLATFORM替换为对应平台标识) pnpm run dev:PLATFORM ``` ### 构建项目 ```bash # 构建 H5 pnpm run build:h5 # 构建微信小程序 pnpm run build:mp-weixin # 构建其他平台(将PLATFORM替换为对应平台标识) pnpm run build:PLATFORM ``` ### 其他命令 ```bash # TypeScript 类型检查 pnpm run type-check # 清理 node_modules pnpm run clean # 清理缓存 pnpm run clean:cache # ESLint 代码检查并自动修复 pnpm run lint:eslint # Prettier 代码格式化 pnpm run lint:prettier # Stylelint 样式检查并自动修复 pnpm run lint:stylelint ``` ## 部署 ### Nginx 部署 1. 构建 H5 项目: ```bash pnpm run build:h5 ``` 2. 将生成的文件(位于 `dist/build/h5/`)复制到 Nginx 服务器的静态文件目录 3. 配置 Nginx 支持 Vue Router 的 history 模式: ```nginx server { listen 80; server_name your-domain.com; // 自定义 root /var/www/html/dist/build/h5; index index.html; location / { try_files $uri $uri/ /index.html; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } } ``` ### Docker 部署 项目提供了 Docker 支持,可以快速部署 H5 应用。 #### 使用 Docker 命令部署 ```bash # 构建镜像 docker build -t uniapp-h5 . # 运行容器 docker run -d -p 80:80 --name uniapp-h5-container uniapp-h5 ``` #### 使用 Docker Compose 部署 ```bash # 使用 docker-compose 构建和启动服务 docker-compose up -d # 停止并删除服务 docker-compose down ``` #### 使用 nerdctl 部署 nerdctl 是一个与 Docker 兼容的 containerd CLI 工具,可以作为 Docker 的替代品使用: ```bash # 构建镜像 nerdctl build -t uniapp-h5 . # 运行容器 nerdctl run -d -p 80:80 --name uniapp-h5-container uniapp-h5 # 查看运行中的容器 nerdctl ps # 停止容器 nerdctl stop uniapp-h5-container # 删除容器 nerdctl rm uniapp-h5-container # 删除镜像 nerdctl rmi uniapp-h5 ``` #### 使用 nerdctl compose 部署 ```bash # 使用 nerdctl-compose 构建和启动服务 nerdctl compose up -d # 停止并删除服务 nerdctl compose down ``` ## 项目结构 ```md uniapp-vue3-ts-template/ # 项目根目录 ├── deploy/ # 部署相关配置文件 │ ├── nginx.conf # Nginx部署配置文件 │ └── nginx_ssl.conf # Nginx SSL部署配置文件 ├── src/ # 源代码目录 │ ├── api/ # 接口相关文件 │ │ └── .gitkeep # Git占位符文件,确保空目录也能被Git跟踪 │ ├── components/ # 公共组件目录 │ │ └── .gitkeep # Git占位符文件 │ ├── pages/ # 页面目录 │ │ ├── dayjs/ # Day.js示例页面 │ │ │ └── dayjs.vue # Day.js功能演示页面 │ │ ├── demo/ # 示例页面 │ │ │ └── demo.vue # 示例演示页面 │ │ ├── index/ # 首页 │ │ │ └── index.vue # 应用首页 │ │ ├── lodash/ # Lodash示例页面 │ │ │ └── lodash.vue # Lodash功能演示页面 │ │ ├── pinia/ # Pinia状态管理示例页面 │ │ │ └── pinia.vue # Pinia功能演示页面 │ │ ├── request/ # 网络请求示例页面 │ │ │ └── request.vue # 请求功能演示页面 │ │ ├── unocss/ # UnoCSS示例页面 │ │ │ └── unocss.vue # UnoCSS功能演示页面 │ │ └── zpaging/ # z-paging组件示例页面 │ │ └── zpaging.vue # 分页组件演示页面 │ ├── static/ # 静态资源目录 │ │ └── logo.png # 应用Logo图片 │ ├── stores/ # 状态管理目录(Pinia) │ │ ├── modules/ # 状态管理模块 │ │ │ └── member.ts # 用户状态管理模块 │ │ └── index.ts # 状态管理入口文件 │ ├── types/ # TypeScript类型定义目录 │ │ └── auto-imports.d.ts # 自动导入类型定义文件 │ ├── utils/ # 工具函数目录 │ │ ├── dayjs.ts # Day.js工具配置文件 │ │ └── http.ts # HTTP请求工具封装 │ ├── App.vue # 应用根组件 │ ├── env.d.ts # 环境变量类型定义 │ ├── main.ts # 应用入口文件 │ ├── manifest.json # 应用配置文件(UniApp) │ ├── pages.json # 页面路由配置文件 │ ├── shime-uni.d.ts # UniApp类型定义补充 │ └── uni.scss # 全局样式文件 ├── .husky/ # Git钩子工具目录 │ ├── commit-msg # 提交信息校验钩子 │ └── pre-commit # 提交前校验钩子 ├── .vscode/ # VSCode编辑器配置目录 │ ├── extensions.json # 推荐扩展配置 │ └── settings.json # 编辑器设置 ├── .editorconfig # 编辑器配置统一文件 ├── .eslintrc-auto-import.json # ESLint自动导入配置 ├── .gitattributes # Git属性配置 ├── .gitignore # Git忽略文件配置 ├── .npmrc # NPM配置文件 ├── .nvmrc # Node版本管理配置 ├── .prettierignore # Prettier格式化忽略配置 ├── .prettierrc # Prettier格式化规则配置 ├── .stylelintignore # Stylelint样式检查忽略配置 ├── .stylelintrc.cjs # Stylelint样式检查规则配置 ├── Dockerfile # Docker镜像构建文件 ├── LICENSE # 开源许可证 ├── README.md # 项目说明文档 ├── commitlint.config.js # 提交信息规范配置 ├── demo.gif # 演示GIF图片 ├── docker-compose.yaml # Docker容器编排配置 ├── eslint.config.mjs # ESLint配置文件 ├── favicon.ico # 网站图标 ├── index.html # HTML模板文件 ├── package.json # 项目配置和依赖管理文件 ├── pnpm-lock.yaml # PNPM依赖锁定文件 ├── shims-uni.d.ts # UniApp类型声明文件 ├── tsconfig.json # TypeScript配置文件 ├── unocss.config.ts # UnoCSS配置文件 └── vite.config.ts # Vite构建工具配置文件 ``` ## 许可证 [MIT](./LICENSE)