跪拜 Guibai
← Back to the summary

Three Wot UI Starter Templates for uni-app, Compared

Hello everyone, I'm Buru Moyu Qu, the main maintainer of Wot UI. Welcome to my uni-app sharing column.

A while ago, a developer asked me:

Wot UI is already installed. Do I still need to configure routing, requests, state management, and subpackage optimization one by one?

Of course you can configure them yourself. But by the time you finish setting up pages.json, UnoCSS, Pinia, request encapsulation, and code standards, half a day may have passed, and you haven't written a single line of business code. Next time you start a new project, you'll replay this whole process again.

Don't make things hard for yourself. Starter templates are exactly for this.

This article introduces three uni-app starter templates that use Wot UI: the officially maintained wot-starter (https://github.com/wot-ui/wot-starter), oiyo-starter (https://github.com/wot-ui/oiyo-starter), and the community project unibest (https://github.com/feige996/unibest). All of them can get a project up and running quickly, but their approaches differ.

This article is based on the current maintenance branches of the three projects. pnpm is used uniformly for demonstrations below, and Node.js version 20.19 or higher is recommended.

The Bottom Line First: Which One Should You Choose?

If you're in a hurry, take a look at this table first:

Template Maintainer Core Features Best Suited For
wot-starter Wot UI Official Full-featured, open ecosystem, clear configuration Individuals or teams wanting a stable, general-purpose base
oiyo-starter Wot UI Official Strong conventions, low configuration, AI-collaboration friendly Teams willing to accept framework conventions and avoid maintaining many plugin configs
unibest Community Rich business capabilities, mature scaffolding, active community Developers wanting to quickly build common business projects, or those with existing unibest experience

I don't intend to pick a "number one in the world." Templates are like code editors: what matters most is that they feel comfortable to use. Let's expand on the problems each one solves.

1. wot-starter: The Official All-Rounder

wot-starter (https://github.com/wot-ui/wot-starter) is based on vitesse-uni-app. The initial idea was straightforward: properly connect Wot UI with modern frontend engineering practices so that everyone can comfortably write uni-app using VS Code, Vite, and the npm ecosystem.

It doesn't just install a component library for you. The current v2 version already integrates these common capabilities:

The advantage of this combination is that it's "visible." Most capabilities come from independent open-source plugins, and their configurations are placed within the project. You can use them directly by following the documentation, or you can delete modules you don't need temporarily. When a project has special requirements, there's plenty of room for modification.

It suits developers encountering modern uni-app engineering for the first time, as well as teams hoping to maintain and gradually customize their engineering base over the long term. If you don't know which one to choose, I usually suggest starting with wot-starter. It might not have the fewest configurations, but it excels in balance.

Quick Start

# Create project
pnpm create uni my-app -t wot-starter-v2

cd my-app
pnpm install

# Run H5
pnpm dev

# Run WeChat Mini Program
pnpm dev:mp-weixin

Besides the command line, wot-starter also provides online documentation and examples (https://starter.wot-ui.cn/). You can directly copy the solutions when encountering specific features. My biggest feeling from maintaining templates is: the more comprehensive the documentation, the fewer times I have to answer repetitive questions in the group chat. That's another form of slacking off.

2. oiyo-starter: Pushing Engineering Conventions One Step Further

oiyo-starter (https://github.com/wot-ui/oiyo-starter) is another official template provided by Wot UI, driven by the Oiyo (https://oiyo.js.org/) framework.

If wot-starter is about combining a set of useful plugins, oiyo-starter is more like consolidating these engineering capabilities into a unified entry point. Routing, layouts, auto-imports, and type generation are no longer configured separately; the project is mainly managed through oiyo.config.ts scanning rules.

It has several interesting points:

For AI Coding, clear directories and conventions are also very useful. An agent doesn't need to guess "where should a new page go" or "which other file needs routing configuration changes." The generated code is more likely to land in the correct place. Saving a few rounds of back-and-forth with the AI saves not just tokens, but also your blood pressure.

Quick Start

# Pull template without retaining the template repo's Git history
pnpx degit wot-ui/oiyo-starter my-app

cd my-app
pnpm install
pnpm dev

pnpm dev will let you choose target platforms like H5 or WeChat Mini Program. After installing dependencies, the project will also automatically execute oiyo prepare to generate route metadata and types.

One point needs to be stated upfront: the template code for oiyo-starter is public, but the core Oiyo framework is released under a commercial software model; the source code is not public. The official statement allows commercial use. Before a company project decides to adopt it, the team is advised to read the license agreement (https://gitee.com/skiyee/oiyo-license) and confirm it meets the company's dependency management requirements.

oiyo-starter is more suitable for developers who prefer "convention over configuration." It was released relatively late, so ready-made examples might be fewer for now, but the direction is clear: consolidate the parts of uni-app engineering that require repeated maintenance, allowing both humans and AI to focus on business logic.

3. unibest: The Community's Battle-Tested Practitioner

unibest (https://github.com/feige996/unibest) is not an official Wot UI project, but it has always used Wot UI as one of its main tech stacks and is a template many developers genuinely use for business projects.

Its characteristic is that it provides quite a lot. Besides Vue 3, TypeScript, Vite, UnoCSS, and Wot UI, the project also has built-in capabilities like conventional routing, layouts, request encapsulation, request and login interception, Pinia persistence, i18n, z-paging, OpenAPI interface generation, Mini Program uploading, and unit testing.

unibest also provides a dedicated creation command and prepares different branches like a basic version, internationalization, and login. You don't need to clone the repository first and then play a "deletion game"; just choose according to your project's needs.

Quick Start

# Choose a template and create the project following the prompts
pnpm create unibest

cd my-app
pnpm install

# Run H5
pnpm dev

# Run WeChat Mini Program
pnpm dev:mp

If your project has common requirements like login, list pagination, and multi-environment interfaces, unibest can save a lot of preliminary work. Its community user base is also relatively large, making it easier to find existing discussions when encountering problems.

The cost is also intuitive: the more built-in capabilities, the more directories and configurations you need to understand when first opening the project. It's recommended to read the official documentation (https://unibest.tech/) first, know which code is the base and which is just a demo, before starting to delete and modify. Otherwise, you might operate fiercely only to find you deleted something you were about to write back immediately.

All Three Templates Can Write Wot UI Like This

The underlying engineering solutions differ, but the pages still use the familiar Wot UI components:

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

<template>
  <view class="p-4">
    <wd-cell-group border>
      <wd-cell title="Current Count" :value="count" />
    </wd-cell-group>

    <wd-button block type="primary" class="mt-4" @click="count++">
      Poke It
    </wd-button>
  </view>
</template>

Component auto-import and style adaptation have already been handled by all three templates. Don't get hung up on "which one can use Wot UI" when choosing a template; what really needs comparison are the engineering conventions and built-in capabilities.

My Selection Advice

Let me translate the choice into even plainer terms:

There's also an often-overlooked method: spend ten minutes running all three projects. Look at the directory structure, add a new page, and write an API request once. A template isn't a marriage; you don't need to make a lifelong decision based only on an introduction. Whichever one makes you flip through documentation the least and fight with configurations the least is the one to use.

The Wot UI team and I will continue to maintain wot-starter and oiyo-starter, and we also welcome community projects like unibest to enrich the Wot UI ecosystem together. One of the joys of making a component library is that you write a button, and later someone actually uses it to build a product.

If you are developing a uni-app project with Wot UI, why not pick one of these three templates to try? Get into business development sooner, and clock out earlier. At least, that's the theory.

Related Resources

Welcome to communicate and discuss in the comments section👇👇