简介

ElfUI 是一个面向 Web Components 的前端框架。它的主线写法是 宏组件：在普通 .ts/.tsx 文件里写 TypeScript 逻辑，用 defineHtml(...) 导出组件，构建时由 @elfui/vite-plugin 预编译模板。

import { defineHtml, useRef } from "@elfui/core";

const count = useRef(0);
const inc = (): void => count.set(count.peek() + 1);

export const Counter = defineHtml(`
    <button @click=${inc}>点了 ${count} 次</button>
`);

ElfUI 的核心路线是编译时细粒度响应式。模板里的文本、属性、事件、条件和列表会被编译成直接更新 DOM 的 runtime helper，每个动态点只订阅自己真正读取的状态。

适合什么项目

ElfUI 适合这几类场景：

场景	推荐理由
组件库	输出标准 Custom Element，跨框架复用
独立 Vite 应用	宏组件预编译，不带 runtime compiler
渐进式改造	可以把组件注册成原生标签放进旧页面
对体积敏感的项目	主入口约 10.52 KB gzip，不包含编译器

和 Vue/Lit/Solid 的关系

ElfUI 借鉴了 Vue 的模板体验、Lit 的 Web Components 输出、Solid 的细粒度更新思路，但内部不是 Vue，也没有 VNode/patch。

维度	ElfUI
组件文件	普通 .ts/.tsx
模板	defineHtml(`...`) 模板声明，构建期编译
响应式	useRef / useReactive / useComputed
输出	标准 Custom Elements
链式组件	放在 @elfui/chain 生态扩展中

学习路线

先读“快速开始”和“组件/定义组件”。能写组件后，再按需要看响应式、指令、样式、路由和内置组合式函数。