🎉 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 开发模板
- 介绍页
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 属性
自动排序,增强编码一致性 - 🖥
多环境
配置分开,想则怎么配置就怎么配置
3)快速开始
直接通过下面的命令即可生成项目
sh
pnpm create unibest <项目名>
偷偷告诉你,
create-unibest
也是我花了几个周末赶出来的,所以才能用pnpm/npm create unibest
命令生成项目。
目前还支持 -t
参数选择模板,目前已有 3 个模板,分别是 base
、i18n
、demo
。不选的话默认也是 base
模板。
sh
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
^_^