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