玩了都年前端，捣鼓了很长一段时间的项目，好玩。

Rue.js （发音 /ruː/，中文名后悔药.js ）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。

它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。

相关链接

https://github.com/hunzhiwange/ruejs

https://ruejs.huododo.com/

特性

• 轻量、直观的 API ，适合渐进式接入

• 默认 Block / Vapor 渲染路径，围绕真实 DOM 做最小更新

• JSX / TSX 一等支持，无需额外模板语法

• 类似 Vue 的响应式 API ，支持 ref、reactive、computed

• 提供基于 Rust / WebAssembly 的运行时，可扩展 Vapor 渲染能力

• 提供 Rust 实现的响应式系统，覆盖信号、依赖追踪与调度能力

• 提供 Rust / Wasm 原生 DOM 编译器，将 JSX 转换为更贴近真实 DOM 的产物

• 官方路由、设计组件库与构建插件协同工作

• 提供 @rue-js/runtime-vapor 与 @rue-js/swc-plugin-rue Rust 侧核心能力

快速开始

Rue 提供官方脚手架，也支持接入现有 Vite 项目。

创建新项目

前置条件：Node.js >= 22.12.0

pnpm create rue@latest
npm create rue@latest
bun create rue@latest
yarn dlx create-rue@latest

进入项目后安装依赖并启动开发服务器：

cd your-project-name
pnpm install
pnpm run dev

接入现有项目

pnpm add @rue-js/rue @rue-js/router

在 Vite 配置中启用 Rue 的 JSX：

// vite.config.tsimport { defineConfig } from 'vite'

export default defineConfig({esbuild: { jsxImportSource: '@rue-js/rue' },})

示例

下面是一个最小 Rue 应用示例：

import { type FC, ref, useApp, useError } from '@rue-js/rue'

const Counter: FC = () => {const count = ref(0)

  return <button onClick={() => count.value++}>点击次数：{count.value}</button>}

useError({ overlay: true, console: true })useApp(Counter).mount('#app')

如果你需要页面级路由，可以继续接入 @rue-js/router：

import { useComponent } from '@rue-js/rue'import { createRouter } from '@rue-js/router'

export default createRouter({history: 'hash',routes: [
    { path: '/', component: useComponent(() => import('./pages/Home')) },
    { path: '/about', component: useComponent(() => import('./pages/About')) },],})