🎉 unibest 官方文档出来啦 🎉
前言
前面几篇 unibest
文章一经发表,就有不少 unibest
爱好者加入微信群,目前 ①② 2个群已经满了,第③个群也有 71
人了,总共有 500+
爱好者,学习氛围也很浓烈。
- 【unibest】uniapp + vue3 超实用模板
- 【unibest】uniapp + vue3 超实用模板(续)
- 【unibest】uniapp + vue3 超实用模板(终)
- 【unibest】uniapp + vue3 超实用模板(番外篇)
- # 🔥2024年最好用的 uniapp 开发模板,近一个月 star 数飙升!🔥
重点说下最后一篇文章,点赞数 376
,收藏数 803
,直接冲上了前端收藏榜 第7
,首屏就能看到了(首屏最末尾 -_-)。
3个交流群的 鸽友们
都普遍认可 unibest
是目前最好的 uniapp
开发模板,编码体验非常 nice
,大大加快了 uniapp
的开发,听到我也很开心。
我也是比较热心的群主,有问题我都热心解决,比如刚开始 @好奇宝宝
需要处理多语言问题,我立马就写出了一个 demo
给他参考,再比如 @ssf
需要路由拦截,我也晚上熬夜搞出来了。
除此之外,鸽友们
总是问有没有入手的文档,不然这个模板 黑科技
那么多真搞不明白,这不花了几个周末终于肝出来了~
希望
鸽友们
多多看文档,菲鸽
可没那么多时间~
文档
1)首页
每一处都是要点,截图如下 首页-传送门
unibest
— Best uniapp 开发模板
- 享受
Vite
无可比拟的体验 — 服务器即时启动,闪电般的热更新,还可以使用基于Vite
生态的插件。 Vue3 + script setup
最新语法 — 让你编写Vue3
毫无割裂感。- 拥抱宇宙最强编辑器
VS Code
— 使用你最熟悉的VS Code
,无需切换编辑器,告别HBuilderX
。 - UnoCSS + UnoCSS Icons — 高性原子化 CSS 引擎 UnoCSS,还有 100000+ 图标为你所用,无需额外引入外链
- 依靠
@uni-helper
强大的插件支持 — 引入pages
+manifest
+lauouts
+components
等插件,大大提升了 uniapp 的开发体验 - 精心配置的规范,规范代码,提升质量 —
TypeScript + Prettier + ESLint + Stylelint + husky + lint-staged + commitlint
配置规范
2) 简介
unibest
是一个集成了多种工具和技术的 uniapp
开发模板,由 uniapp
+ Vue3
+ Ts
+ Vite4
+ UnoCss
+ uv-ui
+ VSCode
构建,模板具有代码提示、自动格式化、统一配置、代码片段等功能,并内置了许多常用的基本组件和基本功能,让你编写 uniapp
拥有 best
体验。
截止到今天(2024-03-09)
unibest
在github
有473
star,gitee
有310
star。( 加起来将近800
star )
✨ 特性
- ⚡️ Vue 3, Vite, pnpm, esbuild – 就是快!
- 🔥 最新语法 –
<script lang="ts" setup>
语法 - 🎨 UnoCSS – 高性能且极具灵活性的即时原子化 CSS 引擎
- 😃 UnoCSS Icons & icones – 海量图标供你选择
- 🍍 pinia & pinia-plugin-persistedstate – 全端适配的全局数据管理
- 🗂
路由拦截
,所见即所得,直接编码,没有黑盒 - 🗂
uni.request
请求封装 – 一键引入,快捷使用 - 📦
组件自动化加载
– 可配置化的组件加载方式,轻松加载组件 - 📥 API 自动加载 – 直接使用 Composition API 无需引入
- 🎉
v3
Code Snippets 加快你的页面生成 - 🦾 TypeScript & ESLint & stylelint – 保证代码质量
- 🌈 husky & lint-staged + commitlint – 保证代码提交质量
- 💡
ES6 import
自动排序,css 属性
自动排序,增强编码一致性 - 🖥
多环境
配置分开,想则怎么配置就怎么配置
👍 实用功能
- 页面下拉刷新(全局+局部)
- 页面上拉加载
- 路由拦截
- 请求拦截
- 导航栏返回 or 去首页
- 导航栏渐变(微信+h5+App)
- 自定义导航栏顶部机型适配
- 微信小程序分享(好友+朋友圈)
- 微信登录
- 非微信登录(h5 和 App)
- 微信一键登录(基于手机号)- 需要非个人认证用户
- 微信小程序获取头像昵称+隐私协议
- 微信小程序 vconsole 调试
- 多语言模板
- 页面悬浮球(floating bubble)
- 多 tab 列表功能
- 瀑布流
- 大转盘抽奖
- 九宫格抽奖
- 登陆模板(APP)
- 登陆模板(H5)
3)快速开始
直接通过下面的命令即可生成项目
pnpm create unibest <项目名>
偷偷告诉你,
create-unibest
也是我花了2个周末赶出来的,所以才能用pnpm/npm create unibest
命令生成项目。
目前还支持 -t
参数选择模板,目前已有 3 个模板,分别是 base
、i18n
、demo
。不选的话默认也是 base
模板。
pnpm create unibest my-unibest -t base # 基础模板
pnpm create unibest my-unibest -t i18n # 多语言模板
pnpm create unibest my-unibest -t demo # 所有demo的模板,包含了i18n
4)视图
这里干货比较多,主要包括了 @uni-helper/vite-plugin-uni-pages 插件,使得编写 uniapp
页面时可以在 vue
文件中写页面路由相关信息,无需跳转到 pages.json
里面编写。
5)代码块
通过 VSCODE
的 Code Snippets
编写了一个 v3
代码块,可以快速生成 uniapp
的页面结构。
6)图标库
图标库也是加快产出的一个工具,主要有以下几部分组成:
- 引入的
uv-ui
的图标库 icones
的图标库iconfont
图标库
文档中重点讲述了 icones
的图标库的使用,VS CODE
也很给力,可以直接预览:
- 其他
其他内容欢迎自行前往围观,谢谢大家~
总结
本文介绍了unibest
官网的主要内容,地址如下:
如果本文对你有帮助,记得点赞+收藏~
github
和gitee
也多多star
^_^
原文链接:https://juejin.cn/post/7344258231478419497 作者:菲鸽