基于 Vue3 的 Uniapp 移动端跨平台开发脚手架_uni-app脚手架

Uniapp Starter

基于 Uniapp + Vue3 + Typescript 的移动端跨平台快速开发脚手架

---

技术选型

• Vue3 Web 前端框架，组合式 API <script setup lang="ts">
• Typescript 在 JavaScript 的基础上添加静态类型。
• Vite3 前端工具链
• vk-uview-ui 支持 Vue3 的 uview 组件库
• Pinia 状态管理
• VueUse 基于 Composition API的实用函数集合、hooks。
• UnoCSS 即时按需原子CSS引擎
• ucharts 跨平台图表
• unplugin-vue-components 自动本地导入组件
• Auto import 自动导入常用 API，无需显式 import { computed, ref } from 'vue'
• ESLint 支持保存自动代码格式化
• Fastify 使用 fastify 作为 mock api
• husky Git 提交 hooks, 自动执行脚本
  • lint-staged 提交时仅检查暂存区代码，代码检查通过才能提交
  • commitlint 提交规范检查，Commit message 需要符合规范才能提交
• 使用 px 作为尺寸单位, rpx 不支持动态横竖屏切换计算
• 封装分页(userPager)、加载(useLoading) 、scrollColor 等 hooks，提高复用

目录结构

├── .vscode          — VSCode 编辑器、代码片段、推荐扩展等
├── .husky           — 代码格式、提交规范自动检查
├── mock-api/        — 基于 Fastify 的极简 api mock
├── src/             — 前端源码
│   ├── api/         — api 接口
│   ├── components/  — 自定义组件
│   ├── hooks/       — 自定义 hooks
│   ├── pages/       — uniapp 页面
│   ├── plugins/     — 自定义 Vue3 插件
│   ├── static/      — 图片、公共样式
│   ├── store/       — 基于 Pinia 的状态管理
│   ├── uni_modules/ — 组件库
│   ├── utils/       — 常用工具函数
│   ├── config.ts    — 应用配置
│   ├── pages.json   — 页面路由
│   ├── auto-imports.d.ts — unplugin-auto-import 自动生成
│   ├── manifest.json     — uniapp 配置，如，小程序id、web 路由模式等
│   ├── uni.scss          — uniapp 样式变量
│   ├── permission.ts     — uniapp 拦截器
│   └── ...         — 其他.
├── .env            — 环境变量 (development 开发、production 生产)
├── vite.config     — vite 设置
├── unocss.config   — unocss 设置
├── package.json    — 依赖
└── ...             — 其他.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

依赖

• Node.js >= V18
• VS Code 及 推荐扩展
• pnpm

快速开始

$ git clone https://github.com/aaron-zzh/uniapp-starter example
$ cd ./example
$ pnpm install                  # 安装依赖
$ pnpm run dev:h5               # H5 开发调试
$ pnpm run mock                 # 打开一个新终端运行，启动模拟接口
1
2
3
4
5

部署

打包前确认各项参数配置、环境变量

$ pnpm run build:h5               # H5 打包到 ./dist/build/h5
1

参考

• Vue3 开发指南
• UnoCSS 工具
• uview 组件库 v1
• uniapp 官网

升级

$ npx @dcloudio/uvm   # 升级 uniapp
$ pnpm update         # 升级所有依赖的版本
1
2

欢迎参与

源码地址

https://github.com/aaron-zzh/uniapp-starter

TODO

• UnoCSS 改造
• Typescript 规范
• App 打包测试

常见问题

1. 在vue3 ts中如下使用 require 运行时报错：require is not defined

var jweixin = require('jweixin-module');

jweixin-module 也不支持 import 写法

解决方案：

• 安装 weixin-js-sdk：
  pn install weixin-js-sdk -S
• 通过 import 导入
  import jweixin from 'weixin-js-sdk'

License

Copyright © AaronZZH
LICENSE file.

---

^{Made with ♥ by AaronZZH}