Plugins Overview

当前官方支持的运行时插件

这页不再泛化讨论“如何写插件”，而是直接列出 Rue 当前已经提供、且可以通过 app.use()接入的官方插件。基于 monorepo 现有入口，当前支持三类核心能力：路由、状态管理、国际化。

插件基础 app.use 参考

官方插件数

Router / Store / I18n

统一接入

app.use()

安装入口统一，应用装配更直接

页面范围

运行时插件

Vite / SWC 等构建层能力放在工具链页面

官方运行时插件

Router

@rue-js/router

官方客户端路由插件，覆盖 Hash / History 历史、命名路由、嵌套路由、重定向与导航守卫。

适合场景

多页面应用文档站带参数详情页

核心 API

createRoutercreateWebHashHistorycreateWebHistoryRouterViewRouterLinkuseRouteuseRouter

安装

pnpm add @rue-js/router

支持 path params、命名路由、redirect、children 和 beforeEnter / beforeEach / afterEach。
RouterView 与 RouterLink 已经是完整运行时能力，不需要额外胶水层。
同一套 API 可以覆盖文档、后台、实验性 Demo 等常见路由场景。

路由指南交互 Demo

官方运行时插件

Store

@rue-js/store

官方状态管理插件，提供 createStore / defineStore 双入口，并内建面向 URL 查询串的同步插件。

适合场景

全局状态业务模块拆分URL 驱动筛选页

核心 API

createStoredefineStoreuseStoreRootcreateQuerySyncparseAsStringparseAsIntegerparseAsBooleandebouncethrottle

安装

pnpm add @rue-js/store

Store 实例自带 $patch、$set、$reset、$subscribe，既支持集中式修改，也支持细粒度路径更新。
createQuerySync 可以把 store 字段映射到 URL 查询参数，并提供 parser 与节流/防抖能力。
适合后台筛选、搜索表单、分页条件等需要刷新可恢复的状态场景。

状态管理指南 Query Sync 示例

官方运行时插件

I18n

@rue-js/i18n

官方国际化插件，提供全局 composer、Provider、按需语言包加载，以及消息 / 日期 / 数字格式化能力。

适合场景

多语言站点后台管理需要本地化日期和金额的应用

核心 API

createI18nuseI18nI18nProviderloadLocaleMessagessetLocaleavailableLocalesdn_

安装

pnpm add @rue-js/i18n

支持 fallbackLocale、messageLoader、datetimeFormats、numberFormats，能覆盖常见国际化基建。
既可以使用全局 i18n，也可以通过 I18nProvider / useI18n 做局部作用域国际化。
适合先从消息翻译起步，再逐步补齐日期、数字和懒加载语言包。

插件基础 Context API 交互 Demo

统一接入示例

一个应用同时安装三类官方插件

下面的示例使用当前仓库真实存在的入口名，展示如何把 Router、Store 和 I18n 一次性装配到应用中。

import { type FC, useApp } from '@rue-js/rue'
import { createRouter, createWebHashHistory, RouterView } from '@rue-js/router'
import { createStore } from '@rue-js/store'
import { createI18n } from '@rue-js/i18n'

const Home: FC = () => <div>你好，Rue</div>
const Root: FC = () => <RouterView />

const router = createRouter({
  history: createWebHashHistory(),
  routes: [{ path: '/', component: Home }],
})

const store = createStore()

const i18n = createI18n({
  locale: 'zh-CN',
  fallbackLocale: 'en',
  messages: {
    'zh-CN': { hello: '你好，Rue' },
    en: { hello: 'Hello, Rue' },
  },
})

useApp(Root).use(router).use(store).use(i18n).mount('#app')

选择建议

页面层有跳转、嵌套视图、守卫和参数路由需求时，先上 Router。
状态需要跨页面共享，或者要和 URL 查询参数联动时，补上 Store。
应用要面向多语言、多地区格式化输出时，再引入 I18n。