更新记录

1.0.3（2023-03-08）

升级uniapp编译器，兼容微信小程序

1.0.2（2023-02-28）

更新文档、压缩包缺少文件问题

1.0.1（2023-02-27）

第一版

• 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，提高复用

平台兼容性

Uniapp Starter

Uniapp + Vue3 跨平台移动端开发脚手架，H5、小程序、APP

技术选型

• 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/         — 基于 Fastify 的极简 api mock
│   ├── 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    — 依赖
└── ...             — 其他.

依赖

• 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                 # 打开一个新终端运行，启动模拟接口

部署

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

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

参考

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

升级

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

欢迎参与

TODO

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

License

Copyright © AaronZZH LICENSE file.

广告

学记DAO：一个开放知识管理社区，欢迎加入

^{Made with ♥ by AaronZZH}