一个 “超超超” 好用的 uniapp 开发框架

原创已于 2025-02-22 18:12:12 修改 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #web app #个人开发 #javascript #前端框架 #vue.js

于 2025-02-22 17:57:06 首次发布

零基础入门《前端工程化》到年薪百万专栏收录该内容

5 篇文章

订阅专栏

前言

github 地址：https://github.com/DaMaiCoding/uni-plus

如果这个项目对你有所帮助，可以点个 ⭐star 支持一下，感谢大家~

uni-plus 是由 Uniapp + Vue3 + TS + Vite + Pinia + Unocss + WotUi 驱动的跨端快速启动模板，使用 VS Code 开发，具有丰富的代码提示、错误校验、类型提醒、预先插件安装、代码片段等功能，而且拥有丰富的案例 Echarts 图表，表单分页，权限控制、接口请求优化等等（配备搭建教程）

uni-plus 提供了 layout布局、请求封装、请求拦截、权限控制、原子CSS、路由拦截、路由自动导入 等基础功能，并且配备了 代码提示、代码高亮、代码格式化、commit 优化 等开发环境配置，让您的开发更加高效、便捷

在这里插入图片描述

📓 文档地址 | 🌰 预览地址

环境配置

node 版本请安装到 Node.js 18+ 以上的版本

使用

1. 脚手架创建项目

使用 pnpm 使用脚手架快速生成项目模板，pnpm create uni-plus -n <项目名>

如果你不使用 -n <项目名> ，会进入命令行交互模式，输入文件名

pnpm create uni-plus -n uni-plus
# 或者
npx create-uni-plus -n uni-plus
npm create uni-plus -n uni-plus

【注意】如果无法创建项目，可能是有缓存，可以加上 @latest

pnpm create uni-plus@latest -n uni-plus

我们来创建一下，如果你是下面样子就是创建完成了
在这里插入图片描述
接下来，跑一下项目

cd uni-plus
pnpm install
pnpm dev:h5

在这里插入图片描述

上面这个是安装了 demo 模板的

2. 入门

该项目有两个模板，一个是 base 模板，一个是 demo 模板

demo 模板是基于 base 模板进行扩展的

想快速入门的话，可以下载 demo 模板，然后使用查看文档教程

大概看一遍就能大致理解，模板的大致结构与组成了

文档地址：https://damaicoding.github.io/uni-plus-doc/

3. commit

commit 的话，为了规范提交流程，不使用直接提交方式

采用 cz 提交，运行下面的命令，就会有提示，按提示走就行

git add .
pnpm cz
git push origin dev

请添加图片描述

4. Log 与 Tag 生成

pnpm release

直接输入上面命令，就会让你选择，你想要 tag 类型，有下面三种

patch 小版本 0.0.1 -> 0.0.2

minor 中版本 0.0.1 -> 0.1.0

major 大版本 0.0.1 -> 1.0.0

push 选择 Yes 之后，就会自动上传 CHANGELOG.md 并且帮我们打好 tag
请添加图片描述

6. Vscode Snippets

在 .vue 文件中，输入 v3 按 Enter 就可以快速生成页面模板

具体实现原理可以看 Snippets篇

请添加图片描述

DEMO 学习

为了让同学们能更快的上手这个框架

也是准备丰富的案例供学习参考~

需下载两个项目

uni-plus-demo 提供案例学习
uni-plus-mock 为 demo 请求部分，提供 mock 数据