一个基于 Vue 3 + TypeScript + Vite + UnoCSS 的 uni-app 项目模板,集成了多种实用工具和最佳实践,适用于快速开发跨平台应用。
master分支:包含除了uview-plus组件库的所有分支
dev2.0-Wot:包含了wot-design-uni ,没有css格式化功能
dev2.0-Wot-stylelint: 包含了wot-design-uni 和css格式化
dev2.0-uviewPlus: 包含了uview-plus组件库,没有css格式化功能
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.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 提供原子化 CSS 解决方案:
<!-- 示例用法 -->
<view class="flex justify-center items-center p-4 bg-blue-500 text-white">UnoCSS 示例</view>
项目使用 Pinia 进行状态管理,示例文件位于 src/stores/
目录下。
// 使用 store
const userStore = useUserStore();
项目对 uni.request 进行了封装,提供了拦截器和统一的错误处理:
// 示例用法
import { request } from "@/utils/request";
const data = await request<ResponseType>({
url: "/api/endpoint",
method: "GET",
});
项目配置了 unplugin-auto-import 和 unplugin-vue-components 实现 API 和组件的自动导入:
项目配置了 easycom,可以直接使用 components
目录下的组件,无需手动导入:
<!-- 示例用法,无需导入 -->
<custom-component></custom-component>
不想项目出现sass弃用警告可以降级sass版本
npm install sass@1.32.13 --save-dev
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。