大家好我是不如摸鱼去Wot UI 的主要维护者欢迎来到我的 uni-app 分享专栏。前段时间有位开发者问我Wot UI 已经装好了路由、请求、状态管理、分包优化这些还要自己一个个配吗当然可以自己配。只是等你把pages.json、UnoCSS、Pinia、请求封装、代码规范都折腾完半天可能已经过去了业务代码还一行没写。下次开新项目再把这套流程重播一遍。别为难自己起手模板就是干这个的。这篇文章介绍三个使用 Wot UI 的 uni-app 起手模板Wot UI 官方维护的 wot-starterhttps://github.com/wot-ui/wot-starter、oiyo-starterhttps://github.com/wot-ui/oiyo-starter以及社区项目 unibesthttps://github.com/feige996/unibest。它们都能让项目快速跑起来但思路并不一样。本文以三个项目当前的维护分支为准。下面统一使用 pnpm 演示Node.js 建议使用 20.19 或更高版本。先说结论应该选哪个如果你赶时间可以先看这张表模板维护方核心特点更适合谁wot-starterWot UI 官方功能完整、生态开放、配置清晰想要一套稳妥通用底座的个人或团队oiyo-starterWot UI 官方强约定、低配置、对 AI 协作友好不想维护一堆插件配置愿意接受框架约定的团队unibest社区业务能力丰富、脚手架成熟、社区活跃想快速开发常见业务项目或已有 unibest 使用经验的开发者我没有打算选出一个“天下第一”。模板跟编辑器差不多用着顺手最重要。下面展开聊聊它们各自解决了什么问题。1. wot-starter官方的全能型选手wot-starterhttps://github.com/wot-ui/wot-starter基于 vitesse-uni-app最初的想法很直接把 Wot UI 和现代前端工程化方案好好接在一起让大家可以用 VS Code、Vite 和 npm 生态舒服地写 uni-app。它不是只帮你装了一个组件库。目前的 v2 版本已经集成了这些常用能力基于文件的路由、布局系统、组件与 API 自动导入wot-ui/router路由、Alova 请求、Pinia 状态管理UnoCSS、图标集、国际化和暗黑模式uni-echarts、主包优化、应用级根组件TypeScript、ESLint以及小程序 CI 等工程化配置这套组合的好处是“看得见”。大部分能力来自独立的开源插件配置也放在项目里。你可以照着文档直接用也可以删掉暂时用不到的模块。项目有特殊需求时改造空间比较大。它适合第一次接触现代化 uni-app 工程的开发者也适合希望长期维护、逐步定制工程底座的团队。如果你不知道该选哪个我通常会建议先从 wot-starter 开始。它未必是配置最少的但胜在均衡。快速创建# 创建项目pnpmcreate uni my-app-twot-starter-v2cdmy-apppnpminstall# 运行 H5pnpmdev# 运行微信小程序pnpmdev:mp-weixin除了命令行wot-starter 还提供了在线文档和示例https://starter.wot-ui.cn/遇到具体功能时可以直接抄作业。维护模板最大的感受就是文档写得越全我在群里重复回答问题的次数越少也算另一种摸鱼了。2. oiyo-starter把工程约定再往前推一步oiyo-starterhttps://github.com/wot-ui/oiyo-starter是 Wot UI 官方提供的另一个模板由 Oiyohttps://oiyo.js.org/框架驱动。如果说 wot-starter 是把一套好用的插件组合起来oiyo-starter 更像是把这些工程能力收进一个统一入口。路由、布局、自动导入和类型生成不再各配各的项目主要通过oiyo.config.ts管理扫描规则。它有几个很有意思的点可以在App.vue中编写模板集中处理应用级视图和共享状态页面内使用definePageMeta()声明标题、样式与布局减少来回修改pages.json通过layouts/复用默认布局、TabBar 布局或业务外壳自动扫描组件、API、Store 和工具函数少写一些机械的import内置 Wot UI、Pinia 持久化、OiyoHttp、路由和 ECharts 示例对 AI Coding 来说明确的目录和约定也很有用。Agent 不需要猜“新页面应该放哪”“路由配置还要改哪个文件”生成的代码更容易落在正确位置。少跟 AI 来回掰扯几轮省下来的不只是 Token还有血压。快速创建# 拉取模板但不保留模板仓库的 Git 记录pnpx degit wot-ui/oiyo-starter my-appcdmy-apppnpminstallpnpmdevpnpm dev会让你选择 H5、微信小程序等目标平台。安装依赖后项目还会自动执行oiyo prepare生成路由元数据和类型。这里有一点需要提前说明oiyo-starter 的模板代码是公开的但核心 Oiyo 框架采用商业软件发布模式源码不公开官方说明允许商业使用。公司项目决定接入前建议团队先阅读许可协议https://gitee.com/skiyee/oiyo-license确认它符合公司的依赖管理要求。oiyo-starter 更适合喜欢“约定优于配置”的开发者。它发布得比较晚现成案例暂时会少一些但路线很明确把 uni-app 工程里反复维护的部分收起来让人和 AI 都专注业务。3. unibest社区里的实战派unibesthttps://github.com/feige996/unibest不是 Wot UI 官方项目不过它一直把 Wot UI 作为主要技术栈之一也是不少开发者真正拿来做业务的模板。它的特点是东西给得比较足。除了 Vue 3、TypeScript、Vite、UnoCSS 和 Wot UI项目还内置了约定式路由、布局、请求封装、请求与登录拦截、Pinia 持久化、i18n、z-paging、OpenAPI 接口生成、小程序上传和单元测试等能力。unibest 还提供了专门的创建命令并准备了基础版、国际化、登录等不同分支。你不需要先克隆仓库再做“删删乐”按项目需要选择即可。快速创建# 根据提示选择模板并创建项目pnpmcreate unibestcdmy-apppnpminstall# 运行 H5pnpmdev# 运行微信小程序pnpmdev:mp如果你的项目有登录、列表分页、多环境接口这些常见需求unibest 能省下不少前期工作。它的社区使用者也比较多遇到问题时更容易搜到现成讨论。代价也很直观内置能力越多第一次打开项目要认识的目录和配置就越多。建议先看一遍官方文档https://unibest.tech/知道哪些代码是底座、哪些只是演示再开始删改。否则一顿操作猛如虎最后发现删的是自己马上要写回来的东西。三个模板都能这样写 Wot UI底层工程方案不同页面里使用的仍然是熟悉的 Wot UI 组件script setup langts const count ref(0) /script template view classp-4 wd-cell-group border wd-cell title当前计数 :valuecount / /wd-cell-group wd-button block typeprimary classmt-4 clickcount 摸一下 /wd-button /view /template组件自动导入、样式适配这些事情三个模板都已经处理好了。选模板时不用纠结“哪个才能用 Wot UI”真正需要比较的是工程约定和内置能力。我的选择建议再把选择题翻译得直白一点想用官方维护、完全开源、方便按需改造的通用方案选wot-starter。喜欢强约定希望少维护配置也在尝试 AI 协作开发看看oiyo-starter。希望登录、请求、分页等常见业务能力尽量现成重视社区积累选unibest。还有一个常被忽略的办法花十分钟把三个项目都跑一遍。看看目录结构新增一个页面再写一次接口请求。模板不是结婚不用只看介绍就做终身决定。哪个让你最少翻文档、最少和配置打架就用哪个。我和 Wot UI 团队会继续维护 wot-starter 和 oiyo-starter也欢迎 unibest 这样的社区项目一起丰富 Wot UI 生态。做组件库很开心的一点就是你写下一个按钮后来真的有人用它做出了产品。如果你正在用 Wot UI 开发 uni-app 项目不妨从这三个模板中挑一个试试。早点进入业务开发早点下班。至少理论上是这样。相关资源Wot UI 文档https://wot-ui.cn/wot-starterhttps://github.com/wot-ui/wot-starterwot-starter 文档https://starter.wot-ui.cn/oiyo-starterhttps://github.com/wot-ui/oiyo-starterOiyo 文档https://oiyo.js.org/unibesthttps://github.com/feige996/unibestunibest 文档https://unibest.tech/欢迎评论区沟通、讨论
