unibest:把 uni-app 从＂能写＂拉到＂写得爽＂的现代化脚手架

做 uni-app 的人大多绕不开同一个吐槽：HBuilderX 编码体验一般、pages.json 要手写、Webpack 冷启慢、跨端兼容一堆坑。unibest 就是冲着这些痛点去的——由开发者"菲鸽"维护，MIT 协议，GitHub 已 2.8k+ Star，定位不是"又一个模板"，而是 uni-app + Vue3 + Vite5 + TypeScript + UnoCSS + Pnpm 这条现代技术栈的"最佳实践打包版"，名字也直白：uni + best。

它把原生 uni-app 的哪些短扳补上了

原生 uni-app 走的是 HBuilderX + Webpack + 手写 pages.json 的老路子，unibest 一条条对账：

技术栈表里还有几个关键角色：@uni-helper/vite-plugin-uni-pages（路由）、vite-plugin-uni-layouts（布局）、vite-plugin-uni-components（组件自动导入）、unplugin-auto-import（API 自动导入）——整套 uni-helper 生态是 unibest 体验升级的真正底座。

三个能直接抄走的实用例子

例 1：新建页面，不用碰 pages.json

原生写法要在 pages.json 里加一段 { path, style }，多人协作还容易合并冲突。unibest 里你只管在 src/pages/ 下建 .vue 文件，插件自动生成 pages.json。

<!-- src/pages/order/index.vue --><route>{  style: {    navigationBarTitleText: '订单',    navigationStyle: 'custom'  }}</route><template>  <view>订单页</view></template>

全局配置（tabBar / 窗口样式）统一收在 pages.config.ts，页面级配置丢进 <route> 代码块，手动改 pages.json 反而会被覆盖——这是新手最容易踩的坑。 设首页只要在 <route> 里加 type="home"，整个项目保证只有一个，否则按字母排第一个不一定是你想设的那个。

分包也一样，vite.config.ts 里配：

UniPages({  exclude: ['**/components/**/**.*'],  subPackages: ['src/pages-sub'],})

例 2：Alova 一行请求 + useRequest

unibest 内置三种请求方案，简单项目用自带 http 就够，复杂交互换 Alova 或 vue-query。Alova 的写法：

// src/api/foo-alova.tsimport { alovaInstance } from '@/http/request/alova'export interface IFooItem { id: string; name: string }export const getFooAPI = (name: string) =>  alovaInstance.Get<IFooItem>('/foo', { params: { name } })

页面里消费：

import { getFooAPI } from '@/api/foo-alova'const { loading, data, error, run } = useRequest(() =>  getFooAPI('菲鸽'))

拦截器统一在 src/http/interceptor.ts 里处理 token 注入、401 刷新、错误弹 toast，业务页不用管。 接口按模块塞 src/api/，比散在页面里好维护。

例 3：Layout 一行切换

src/layouts/default.vue 是默认布局，要做"带底部 tab 的页面""纯空白页""特殊活动页"几种形态，不用每页复制粘贴结构：

<!-- src/pages/activity/lucky.vue --><route>{  layout: 'special',  style: { navigationBarTitleText: '大转盘' }}</route>

框架会拿 src/layouts/special.vue 把页面包一层，<router-view> 的位置就是你这页的内容。默认没写 layout 就走 default。 对"首页带 tab / 详情页不带 tab / 活动页全屏"这种多布局场景，省掉大量重复引入。

快速起手（3 条命令）

pnpm create unibest my-appcd my-app && pnpm ipnpm dev:h5          # H5 → localhost:9000pnpm dev:mp-weixin   # 微信小程序 → 丢微信开发者工具pnpm dev:app         # App → 仍要 HBuilderX 接一下打包

Node ≥ 18，pnpm ≥ 7.30，preinstall 脚本会强锁 pnpm，用 npm/yarn 直接拦。

客观说几句短板

适合谁

中大型 uni-app 项目（小程序 + H5 + App 都要）、追求 TS + 工程化规范的团队、受够了 HBuilderX 想切 VS Code 的人——这三类是直接受众。如果是两三页的小程序 demo，原生 uni create 反而更轻。

💡 一句话判断：你上次改 pages.json 合并冲突是哪天？如果答案是"上周"，unibest 就该进书签了。