🎉 unibest 官方文档出来啦 🎉

发布于:2024-04-25 ⋅ 阅读:(17) ⋅ 点赞:(0)

🎉 unibest 官方文档出来啦 🎉

前言

前面几篇 unibest 文章一经发表,就有不少 unibest 爱好者加入微信群,目前 ①② 2个群已经满了,第③个群也有 170+ 人了,总共有 600+ 爱好者,学习氛围也很浓烈。

重点说下最后一篇文章,点赞数 376,收藏数 803,直接冲上了前端收藏榜 第7,首屏就能看到了(首屏最末尾 -_-)。

image.png

3个交流群的 鸽友们 都普遍认可 unibest 是目前最好的 uniapp 开发模板,编码体验非常 nice,大大加快了 uniapp 的开发,听到我也很开心。

image.png

我也是比较热心的群主,有问题我都热心解决,比如刚开始 @好奇宝宝 需要处理多语言问题,我立马就写出了一个 demo 给他参考,再比如 @ssf 需要路由拦截,我也晚上熬夜搞出来了。

除此之外,鸽友们 总是问有没有入手的文档,不然这个模板 黑科技 那么多真搞不明白,这不花了几个周末终于肝出来了~

希望 鸽友们 多多看文档,菲鸽 可没那么多时间~

image.png

接下来看看文档内容~

一、首页

每一处都是要点,截图如下

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 配置规范

image.png

二、简介

unibest 是一个集成了多种工具和技术的 uniapp 开发模板,由 uniapp + Vue3 + Ts + Vite4 + UnoCss + uv-ui + VSCode 构建,模板具有代码提示、自动格式化、统一配置、代码片段等功能,并内置了许多常用的基本组件和基本功能,让你编写 uniapp 拥有 best 体验。

截止到今天(2024-03-09) unibestgithub473 star, gitee310 star。( 加起来将近 800 star )

image.png

✨ 特性

  • ⚡️ , , ,  - 就是快!
  • 🔥 最新语法 - <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 命令生成项目。

image.png

create unibest 支持 -t 参数选择模板,目前已有两大类 6 个模板

  • vscode 模板(4 个):分别是 basedemoi18nucharts
  • hbx 模板(2 个):分别是 hbx-basehbx-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 里面编写。 auto-page.gif

image.png

五、代码块

通过 VSCODECode Snippets 编写了一个 v3 代码块,可以快速生成 uniapp 的页面结构。

snippets3.gif

image.png

六、图标库

图标库也是加快产出的一个工具,主要有以下几部分组成:

  • 引入的 uv-ui wot-design-uni 的图标库
  • icones 的图标库
  • iconfont 图标库

文档中重点讲述了 icones 的图标库的使用,VS CODE 也很给力,可以直接预览:

image.png image.png

七、 开源打赏

开源不易,如果本项目对您的工作起到了帮助,加快了您的项目进展,解决了您的问题,希望您可以 适当打赏,感谢!

image.png

八、其他

其他内容欢迎自行前往围观,谢谢大家~

image.png

总结

本文介绍了unibest 官网的主要内容,地址如下:

如果本文对你有帮助,记得点赞+收藏~

githubgitee 也多多 star ^_^

image.png