后悔药 Rue.js
玩了都年前端，捣鼓了很长一段时间的项目，好玩。
Rue.js （发音 /ruː/，中文名后悔药.js ）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。
它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。
相关链接
https://github.com/hunzhiwange/ruejs
特性
-
轻量、直观的 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-rueRust 侧核心能力
快速开始
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')) },],})
Select Language