uni-app 项目别再从零搭了！3 个 Wot UI 起手模板怎么选？

大家好，我是不如摸鱼去，Wot UI 的主要维护者，欢迎来到我的 uni-app 分享专栏。

前段时间有位开发者问我：

Wot UI 已经装好了，路由、请求、状态管理、分包优化这些还要自己一个个配吗？

当然可以自己配。只是等你把 pages.json、UnoCSS、Pinia、请求封装、代码规范都折腾完，半天可能已经过去了，业务代码还一行没写。下次开新项目，再把这套流程重播一遍。

别为难自己，起手模板就是干这个的。

这篇文章介绍三个使用 Wot UI 的 uni-app 起手模板：Wot UI 官方维护的 wot-starter（github.com/wot-ui/wot-... unibest（github.com/feige996/un...

本文以三个项目当前的维护分支为准。下面统一使用 pnpm 演示，Node.js 建议使用 20.19 或更高版本。

---

先说结论：应该选哪个？

如果你赶时间，可以先看这张表：

模板	维护方	核心特点	更适合谁
wot-starter	Wot UI 官方	功能完整、生态开放、配置清晰	想要一套稳妥通用底座的个人或团队
oiyo-starter	Wot UI 官方	强约定、低配置、对 AI 协作友好	不想维护一堆插件配置，愿意接受框架约定的团队
unibest	社区	业务能力丰富、脚手架成熟、社区活跃	想快速开发常见业务项目，或已有 unibest 使用经验的开发者

我没有打算选出一个"天下第一"。模板跟编辑器差不多，用着顺手最重要。下面展开聊聊它们各自解决了什么问题。

1. wot-starter：官方的全能型选手

wot-starter（github.com/wot-ui/wot-... 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 开始。它未必是配置最少的，但胜在均衡。

快速创建

# 创建项目
pnpm create uni my-app -t wot-starter-v2

cd my-app
pnpm install

# 运行 H5
pnpm dev

# 运行微信小程序
pnpm dev:mp-weixin

除了命令行，wot-starter 还提供了在线文档和示例（starter.wot-ui.cn/），遇到具体功能时可以...

2. oiyo-starter：把工程约定再往前推一步

oiyo-starter（github.com/wot-ui/oiyo... Wot UI 官方提供的另一个模板，由 Oiyo（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-app

cd my-app
pnpm install
pnpm dev

pnpm dev 会让你选择 H5、微信小程序等目标平台。安装依赖后，项目还会自动执行 oiyo prepare，生成路由元数据和类型。

这里有一点需要提前说明：oiyo-starter 的模板代码是公开的，但核心 Oiyo 框架采用商业软件发布模式，源码不公开，官方说明允许商业使用。公司项目决定接入前，建议团队先阅读许可协议（gitee.com/skiyee/oiyo...

oiyo-starter 更适合喜欢"约定优于配置"的开发者。它发布得比较晚，现成案例暂时会少一些，但路线很明确：把 uni-app 工程里反复维护的部分收起来，让人和 AI 都专注业务。

3. unibest：社区里的实战派

unibest（github.com/feige996/un... Wot UI 官方项目，不过它一直把 Wot UI 作为主要技术栈之一，也是不少开发者真正拿来做业务的模板。

它的特点是东西给得比较足。除了 Vue 3、TypeScript、Vite、UnoCSS 和 Wot UI，项目还内置了约定式路由、布局、请求封装、请求与登录拦截、Pinia 持久化、i18n、z-paging、OpenAPI 接口生成、小程序上传和单元测试等能力。

unibest 还提供了专门的创建命令，并准备了基础版、国际化、登录等不同分支。你不需要先克隆仓库再做"删删乐"，按项目需要选择即可。

快速创建

# 根据提示选择模板并创建项目
pnpm create unibest

cd my-app
pnpm install

# 运行 H5
pnpm dev

# 运行微信小程序
pnpm dev:mp

如果你的项目有登录、列表分页、多环境接口这些常见需求，unibest 能省下不少前期工作。它的社区使用者也比较多，遇到问题时更容易搜到现成讨论。

代价也很直观：内置能力越多，第一次打开项目要认识的目录和配置就越多。建议先看一遍官方文档（unibest.tech/），知道哪些代码是底座...

---

三个模板都能这样写 Wot UI

底层工程方案不同，页面里使用的仍然是熟悉的 Wot UI 组件：

<script setup lang="ts">
const count = ref(0)
</script>

<template>
  <view class="p-4">
    <wd-cell-group border>
      <wd-cell title="当前计数" :value="count" />
    </wd-cell-group>

    <wd-button block type="primary" class="mt-4" @click="count++">
      摸一下
    </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 文档：wot-ui.cn/
• wot-starter：github.com/wot-ui/wot-...
• wot-starter 文档：starter.wot-ui.cn/
• oiyo-starter：github.com/wot-ui/oiyo...
• Oiyo 文档：oiyo.js.org/
• unibest：github.com/feige996/un...
• unibest 文档：unibest.tech/

欢迎评论区沟通、讨论👇👇