1 Star 5 Fork 1

moxunjinmu/uniapp-vue3-template

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

UniApp Vue3 Template

一个基于 Vue 3 + TypeScript + Vite + UnoCSS 的 uni-app 项目模板,集成了多种实用工具和最佳实践,适用于快速开发跨平台应用。

License Vue TypeScript Vite uni-app UnoCSS Pinia ESLint Prettier Sass

分支介绍

master分支:包含除了uview-plus组件库的所有分支

dev2.0-Wot:包含了wot-design-uni ,没有css格式化功能

dev2.0-Wot-stylelint: 包含了wot-design-uni 和css格式化

dev2.0-uviewPlus: 包含了uview-plus组件库,没有css格式化功能

特性

  • 🚀 Vue 3 + TypeScript + Vite + UnoCSS 技术栈
  • 📱 支持多端开发(小程序、H5、APP)
  • 🧰 完整的代码规范与提交规范
  • 🔍 ESLint + Prettier 代码质量控制
  • 🔄 Git Hooks 自动化工作流
  • 📦 Pinia 状态管理
  • 🛠️ 请求封装和拦截器
  • 🧩 自动导入 API 和组件
  • 🎨 集成 UnoCSS 原子化 CSS 框架

环境要求

  • Node.js (推荐使用 nvm 管理 Node 版本)
  • VSCode 或 Cursor 编辑器
  • Vue CLI

快速开始

克隆项目

git clone https://gitee.com/your-username/uniapp-vue3-template.git
cd uniapp-vue3-template

安装依赖

# 使用 pnpm(推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn

启动开发服务器

# 开发 H5
pnpm dev:h5

# 开发微信小程序
pnpm dev:mp-weixin

# 开发支付宝小程序
pnpm dev:mp-alipay

# 更多平台请参考 package.json 中的 scripts

构建生产版本

# 构建 H5
pnpm build:h5

# 构建微信小程序
pnpm build:mp-weixin

# 构建支付宝小程序
pnpm build:mp-alipay

# 更多平台请参考 package.json 中的 scripts

项目结构

uniapp-vue3-template/
├── src/                     # 源代码
│   ├── api/                 # API 接口目录
│   ├── components/          # 公共组件
│   ├── composables/         # 组合式函数
│   ├── pages/               # 页面
│   ├── static/              # 静态资源
│   │   └── tabbar/          # Tabbar 图标
│   ├── stores/              # Pinia 状态管理
│   ├── styles/              # 全局样式
│   ├── utils/               # 工具函数
│   ├── App.vue              # 应用入口组件
│   ├── main.ts              # 主入口文件
│   ├── manifest.json        # 应用配置文件
│   ├── pages.json           # 页面配置文件
│   └── uni.scss             # uni-app 样式变量
├── eslint.config.mjs        # ESLint 配置
├── tsconfig.json            # TypeScript 配置
├── uno.config.ts            # UnoCSS 配置
├── vite.config.ts           # Vite 配置
└── package.json             # 依赖和脚本

代码规范

项目集成了 ESLint 和 Prettier 进行代码质量控制和格式化。

ESLint 配置

ESLint 配置位于 eslint.config.mjs 文件,针对 JavaScript、TypeScript 和 Vue 文件提供了代码规范检查。

# 运行 ESLint 检查并修复
pnpm lint

提交规范

项目使用 commitlint 强制实施 Git 提交消息规范:

  • feat: 新功能
  • fix: 修复问题
  • docs: 文档变更
  • style: 代码格式(不影响代码运行的变动)
  • refactor: 重构(既不是新增功能,也不是修改 bug 的代码变动)
  • perf: 性能优化
  • test: 增加测试
  • chore: 构建过程或辅助工具的变动
  • revert: 回退
  • build: 打包

提交示例:

git commit -m "feat: 添加用户登录功能"

使用 pnpm commit 选项式提交

pnpm commit

效果:


? 选择你要提交的类型 : 文档:     📝  文档变更
? 选择一个提交范围(可选): custom
? 请输入自定义的提交范围 : README.md
? 填写简短精炼的变更描述 :
 [Infinity more chars allowed]
 修改分支描述
? 填写更加详细的变更描述(可选)。使用 "|" 换行 :

? 选择关联issue前缀(可选): skip

###--------------------------------------------------------###
docs(README.md): :memo: 修改分支描述
###--------------------------------------------------------###

? 是否提交或修改commit ? Yes
Running pre-commit hook...

> uni-preset-vue@0.0.0 lint:lint-staged D:\700-code\750-Gitee\uniapp-vue3-template
> lint-staged

✔ Backed up original state in git stash (0c08b10)
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
pre-commit end
[dev/dev2.0-Wot-stylelint 9ac9226] docs(README.md): :memo: 修改分支描述
 1 file changed, 18 insertions(+)

UnoCSS 集成

项目集成了 UnoCSS 提供原子化 CSS 解决方案:

<!-- 示例用法 -->
<view class="flex justify-center items-center p-4 bg-blue-500 text-white">UnoCSS 示例</view>

Pinia 状态管理

项目使用 Pinia 进行状态管理,示例文件位于 src/stores/ 目录下。

// 使用 store
const userStore = useUserStore();

HTTP 请求封装

项目对 uni.request 进行了封装,提供了拦截器和统一的错误处理:

// 示例用法
import { request } from "@/utils/request";

const data = await request<ResponseType>({
  url: "/api/endpoint",
  method: "GET",
});

自动导入

项目配置了 unplugin-auto-import 和 unplugin-vue-components 实现 API 和组件的自动导入:

  • Vue API 自动导入
  • Vue 组件自动导入
  • uni-app API 自动导入
  • Pinia API 自动导入

组件使用

项目配置了 easycom,可以直接使用 components 目录下的组件,无需手动导入:

<!-- 示例用法,无需导入 -->
<custom-component></custom-component>

sass警告解决

不想项目出现sass弃用警告可以降级sass版本

npm install sass@1.32.13 --save-dev

许可证

MIT

MIT License Copyright (c) 2025 moxunjinmu Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

一个基于 Vue 3 + TypeScript + Vite + UnoCSS 的 uni-app 项目模板,集成了多种实用工具和最佳实践,适用于快速开发跨平台应用。 展开 收起
TypeScript 等 5 种语言
MIT
取消

发行版

暂无发行版

贡献者 (2)

全部

近期动态

1个月前推送了新的提交到 dev/dev2.0-Wot-stylelint 分支,bfd674f...88a07e0
1个月前推送了新的提交到 master 分支,9f7bc66...1d2ddc8
1个月前合并了 PR #2 docs(README.md): 增加commit提交提示
1个月前创建了 PR #2 docs(README.md): 增加commit提交提示
1个月前推送了新的提交到 dev/dev2.0-Wot-stylelint 分支,9986d42...bfd674f
加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
TypeScript
1
https://gitee.com/moxunjinmu/uniapp-vue3-template.git
git@gitee.com:moxunjinmu/uniapp-vue3-template.git
moxunjinmu
uniapp-vue3-template
uniapp-vue3-template
master

搜索帮助