🔥 oiyo & unibest = 又新又好的 uniapp 模板

👋 朋友们好!我是 skiyee ,也可以叫我 sky ,我们今天用 oiyo 给 unibest 赋能,让其进一步 best !

oiyounibest 的强强联合,不只是"换个壳",而是在 命令层配置层依赖层代码层 四个层面做了系统性的减法。

1. 命令层:从记不住到不用记

如果你的某天打开项目,准备调起一条命令,突然忘记怎么编写,打开了 package.json 看到 40 多个 script 陷入了沉思 ------ 那么你遇到的就是 oiyo 想解决的问题之一!

之前(unibest): 40 多条命令

unibest 需要为每个平台单独配了 dev 和 build 命令。

总共有 40 多行,还不算带 testproduction 尾部的那些变种。

之后(oiyo-unibest): 2 条命令

oiyo 可以交互式的选择平台,你不需要记住 -p 后面该填什么。

听起来是小改动,但实际使用中,你每次切平台不需要翻 scripts,不需要记参数,不纠结输错,这就是差距!

2. 配置层:从 150 行到 7 行

之前(unibest): 150 行

unibest 的 vite.config.ts 挂在 20 多个插件,每个有一段独立配置。你每次打开,看到的是 UniKuRootUniLayoutsUniComponentsUniPagesAutoImportViteRestart... 组合起来 150 多行,每个插件各有一段独立配置,每个都要手动声明。

之后(oiyo-unibest): 7 行

OiyoPlugin 这 1 个插件把类型别名、路由生成、布局系统、自动导入、请求器等全部功能内置了。极简、智能、开箱即用!

基础设施由框架接管、开箱即用,使用心智大幅度下降。

3. 依赖层:由全能型依赖囊括

之前(unibest): 80 多个依赖包

unibest 总共有 80 多个依赖包(dependencies + devDependents),这里面包括 @dcloudio/* 基础套件系列、@uni-helper/* 工程系列等。

之后(oiyo-unibest): 14 个

oiyo-unibest 的总包数压缩到了 14 个。核心依赖是 @skiyee/oiyo 这一个包就代替了上面基础套件以及工程系列。

依赖少最大的好处不是下载快,是你升级框架时只需要盯着一个包的版本号。它背后兼容了 uniapp 全系列基础套件,同时还确保运行最稳定的版本。

4. 代码层:入口、页面、分包的极简化

App.vue 中 <template> 的支持

由于普通 的 UniApp 项目无法在 App.vue 这个文件中编写 <template>

所以 unibest 该功能只能由 @uni-ku/root 插件定义的 App.ku.vue 来接管,但其的本质是组件,也就是说一旦切换页面,你在 App.ku.vue 定义的变量就被恢复了,它必须配合 pinia 这种工具来使用。

而在 oiyo 中,根据 UniApp 以及 小程序 的底层设计,对 App.vue 进行兼容,让其支持:

  • 直接在 App.vue 编写 <template> 的能力
  • 定义的变量也不会因为切换页面而被恢复
  • 定义的变量、方法等支持在整个应用中进行使用

了解更多请点击右边文字前往:App.vue 使用手册

分包自动识别

unibest 里新增一个分包,需要在 vite.config.ts 里手动声明一个 package 配置,每一个分包都必须这样做。

而对于 oiyo 你只需把文件放到 packages/ 目录下,其会主动识别、自动进行分包行为,无需做任何配置。当然,如果你不喜欢该定义的目录,也支持手动进行配置。

了解更多请点击右边文字前往:分包使用手册

自带请求器

在 unibest 类似的项目中,你或许需要引入 axiosalova@uni-helper/uni-network 等第三方请求库。

而在 oiyo 中,你无需依赖第三方请求库,oiyo 自带的 http 模块,支持请求、上传、下载基础请求层,并且还赋予了配置派生、生命周期钩子、自动重试与请求中断能力。

了解更多请点击右边文字前往:网络请求使用手册

5. 一张对比表

维度 unibest oiyo-unibest
scripts 数量 40+ 2
vite.config 配置 150+ 7
总依赖包 80+ 14
核心依赖 @alova/* + @dcloudio/* + @uni-helper/* 各自一个 只需 @skiyee/oiyo 一个
根组件 App.ku.vue App.vue
分包配置 手动声明 自动识别

6. 快速使用

通过下面的命令可以快速生成项目模板:

bash 复制代码
# 如果没有 pnpm 可以通过 npm i -g pnpm 安装。
pnpm create oiyo --template=unibest

创建完成后,进入项目,安装依赖:

bash 复制代码
# 在 VS Code 中打开项目文件夹:
code <project-name>

# 安装依赖:
pnpm install

依赖安装完毕,启动项目:

bash 复制代码
# 通过交互式进行开发平台的选择
pnpm dev

# 或者通过指定模式启动
# pnpm dev h5 test   # 测试环境
# pnpm dev h5 prod   # 生产环境

🎉 oiyo-unibest 还有许多功能正在等待你探索!

7. 项目地址

根据需要进入对应「文档」站点阅读:

根据需要进入项目对应的「仓库」:

点亮 GitHub / Gitee Star,让更多人发现 oiyo-unibest,越多人使用,它就会越 best!


我是 sky skiyee 很高兴认识你,这是我的 github 地址:github/skiyee 欢迎前来光临!

如果觉得有帮助,记得 点赞 + 评论 + 收藏 ~

相关推荐
Csvn9 分钟前
事件循环与渲染时机:一文吃透宏任务、微任务和 rAF
前端
章鱼小丸子逃跑中15 分钟前
【2025最新版】如何将fnm与node.js安装在D盘?【保姆级安装及人性话理解教程】
前端·javascript·npm·node.js
Larcher31 分钟前
从 SDD 到可交付:我如何用规范驱动 AI 做出一个 Chrome 翻译插件
前端·后端·架构
suaizai_1 小时前
AI Agent如何懂你:四层能力拆解
java·前端·人工智能
invicinble1 小时前
把握前端项目的核心(vibecoding)
前端
0end12 小时前
AI Agent 学习笔记(三):上下文工程(下)—— KV Cache、提示词设计与 Agent Skills
前端·aigc·ai编程
CAD老兵2 小时前
在浏览器里对比 DWG/DXF 图纸 —— @mlightcad/cad-diff-viewer
前端·javascript·github
JasonYin2 小时前
AI 定义的 H5移动端 开发规范,直接抄作业!
前端
诗章与猫2 小时前
Leaflet 渲染 100 万 marker 卡成 PPT?我用 WebGL 重写了渲染器
前端
用户921080262862 小时前
在 AI 代码生成项目里接入 Thought:别展示“玄学思维链”,只展示用户真正关心的工具调用
前端