# @fluixi/core 中文文档

规范地址：https://npmcn.com/package/%40fluixi/core/

版本：1\.0\.0-alpha\.108
npm 元数据更新时间：2026-11-07T01:10:09.967Z
中文译文更新时间：2026-11-15T02:17:04.136Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fluixi/core
原文对照：https://npmcn.com/package/%40fluixi/core/?lang=original
项目主页：https://github.com/fluixi/core#readme
源码仓库：https://github.com/fluixi/core

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.5 MB，243 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@fluixi/dom ^1\.0\.0-alpha\.108，@fluixi/jsx ^1\.0\.0-alpha\.108，@fluixi/head ^1\.0\.0-alpha\.108，@fluixi/router ^1\.0\.0-alpha\.108，@fluixi/server ^1\.0\.0-alpha\.108，@fluixi/storage ^1\.0\.0-alpha\.108，@fluixi/compiler ^1\.0\.0-alpha\.108，@fluixi/reactive ^1\.0\.0-alpha\.108，@fluixi/vite-plugin ^1\.0\.0-alpha\.108，vite-plugin-node-polyfills ^0\.25\.0
- 首次发布：2026-07-10T03:17:00.166Z
- 最新版本发布：2026-11-07T01:09:53.343Z
- 近 30 天下载量：5979（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：55（近 12 个月 55 个）

## 中文简介

框架以 DOM 运行时间、 反应核心、 路由器和 JSX 运行时间构建应用程序; 组件运行一次, 反应更新 DOM

## 安装

```sh
npm install @fluixi/core
```

也可以使用：`pnpm add @fluixi/core`、`yarn add @fluixi/core`、`bun add @fluixi/core`

## README

![Fluixi](https://raw.githubusercontent.com/fluixi/assets/main/logos/128x128.png)

# 风毛菊

**编译器-内在反应框架. 编译器知道什么是反应性的,所以会写出普通的TypeScript.**

[![License: MIT](https://img.shields.io/badge/License-MIT-22c55e.svg)](https://npmcn.com/package/%40fluixi/core/LICENSE) ![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white) [![npm](https://img.shields.io/npm/v/fluixi?logo=npm)](https://www.npmjs.com/package/fluixi)

* * *

大多数反应性框架要求您在脑中保留一个语言不共享的模型:读取的被跟踪,你可能无法解构,一个值必须保留一个函数. 编译器无济于事,因为它不知道你的价值观是什么:所以负担是你的,而失败是安静的.

Fluixi的编译器知道. 它解决了一种反应性原始 由它来自绑定, 而不是通过名称的读取, 通过JSX和 `html` 模板,它生成的DOM,SSR,水分和路由作为一个模型.

## 特征

-   🧠 **编译器理解反应** - 通过捆绑而不是名称解决原始人的问题;一个别名被承认,一个同名的本地函数不是
-   ✂️ **调整道具结构** - 说吧 `function Card({ title })` 不断更新; `...rest` 成为 `splitProps` 打电话给你,你会写
-   ✍️ **两个语法,一个模型** - 联合来文X和 `html` 将模板编译成相同的被动表示
-   🚀 **直接DOM** - 更改会运行依赖于它的约束; 没有组件重递, 没有 diff, 没有虚拟树
-   ⏳ **装入策略** - 说吧 `load:visible`, (中文(简体) ), `load:idle`, (中文(简体) ), `load:interaction`, (中文(简体) ), `load:media` 将一个组件分割为自己的块
-   🛣️ **路由器、安全部门改革和水分** - 相同的反应图端到端,边缘没有商定
-   📡 **资源+悬浮** - 在安全部门改革期间等待和播种的装入/误入状态同步数据
-   🏗️ **先输入脚本** - 全部类型和语言服务插件 `html` 模板

## 安装

```bash
npm install @fluixi/core @fluixi/reactive
# or
pnpm add @fluixi/core @fluixi/reactive
# or
yarn add @fluixi/core @fluixi/reactive
```

## 快速启动

### 创建新工程

```bash
npm create fluixi my-app
# or: pnpm create fluixi my-app
```

### 基本示例

```tsx
import { render } from '@fluixi/core';

const Counter = () => {
  const count = $signal(0);

  return (
    <div>
      <h1>Count: {count()}</h1>
      <button onClick={() => count.set(count() + 1)}>Increment</button>
      <button onClick={() => count.set(count() - 1)}>Decrement</button>
      <button onClick={() => count.set(0)}>Reset</button>
    </div>
  );
};

render(() => <Counter />, document.getElementById('app')!);
```

`$signal` 不需要导入: 编译器解决并添加所需的内容. `signal(0)` 从 `@fluixi/reactive/signal` 当您宁愿导入它的时候, 它也是原始的, 在一个从未运行过这个编译器的软件包中工作.

> 联合来文X汇编人: `@fluixi/vite-plugin`脚手架上的即时操作应用程序 `npm create fluixi`。 。 。 .

## 核心概念

### 信号

信号是反应状态。 在某种效果中读取一种效果或JSX认同它;设定它只更新取决于它的内容.

```tsx
const count = $signal(0);
const name = $signal('Alice');

$effect(() => {
  console.log(`${name()} counted to ${count()}`);
});

count.set(5);      // "Alice counted to 5"
name.set('Bob');   // "Bob counted to 5"
```

把它叫来读, `.set()` 写作. `$memo` 产生, `$store` 持有您读取的对象 属性关闭, `$resource` 包裹合成数据。 每个都有一个可导入的双胞胎: `signal`, (中文(简体) ), `memo`, (中文(简体) ), `effect`, (中文(简体) ), `store`, (中文(简体) ), `resource` 从 `@fluixi/reactive/signal`他们就是 同样的原始语,所以两种拼写自由混合在一个文件中.

`createSignal` 联 合 国 `[read, write]` 配对不变, 并且写了很多代码 对付他们.

### 构成部分

组件是返回JSX的平面功能. 一个组件运行 **一次**;道具为直播 读取而非调用时移交的值.

```tsx
function Greeting(props: { name: string }) {
  return <h1>Hello, {props.name}!</h1>;
}
```

解析它们的结构是好的:编译器将绑定物重写为读取,所以它们保存 更新,以及 `...rest` 成为 `splitProps` 打电话你会写:

```tsx
function Card({ title, tone = 'calm', ...rest }) {
  return <article data-tone={tone} {...rest}><h2>{title}</h2></article>;
}
```

无法证明重写是安全的: 重新配置的绑定, 计算出来的密钥, 默认 它必须重新运行在每一个读数上: 它留下你的代码 完全按照书面,并说 为什么在建设时间.

### 控制流量

使用控制流组件而不是三角形和 `.map()` 所以,更新保持精细.

```tsx
import { Show, For, Switch, Match } from '@fluixi/core';

// Show — conditional rendering (child callback receives the narrowed value)
<Show when={() => user()} fallback={<p>Please log in</p>}>
  {(u) => <p>Welcome, {u.name}!</p>}
</Show>

// For — keyed list rendering (index is an accessor)
<For each={todos()}>
  {(todo, i) => <li>{i() + 1}. {todo.text}</li>}
</For>

// Switch / Match — multi-branch
<Switch fallback={<p>Idle</p>}>
  <Match when={() => status() === 'loading'}><p>Loading…</p></Match>
  <Match when={() => status() === 'success'}><p>Done!</p></Match>
  <Match when={() => status() === 'error'}><p>Error</p></Match>
</Switch>
```

`Portal`, (中文(简体) ), `Dynamic`, (中文(简体) ), `Index`,以及 `ErrorBoundary` 也被导出.

### 装入策略

A 类 `load:` 指令决定 _何时_ 一个组件的模块被取出,并移动到它的 自有块 :

```tsx
import { RevenueChart } from './RevenueChart';

<RevenueChart load:visible="200px" />   // when it scrolls near the viewport
<ExportDialog load:interaction />       // on first pointer, focus or key
<AuditLog load:media="(min-width: 1024px)" />
<Panel load:idle />
```

推迟用动态导入取代您的静态导入, 因此当名称为 仅用作标记。 把它也当作一个值,进口就留下了: 而不是静静地运输 块热心.

### `html` 模板

同一反应模式而不配置JSX:在图书馆、剧本或 plain-TypeScript 代码库 :

```ts
import { html } from '@fluixi/core';

function Counter() {
  const n = $signal(0);
  return html`<button @click=${() => n.set(n() + 1)}>${n()}</button>`;
}
```

两种语法都汇编成相同的表述; `@fluixi/ts-plugin` 给出模板 在编辑器中盘旋、完成和打字检查.

### 资源暂停( S)

`createResource` 获取同步数据和轨道加载/错误. `<Suspense>` 显示待决时的倒计时(关于客户端的工作和SSR期间).

```tsx
import { Suspense } from '@fluixi/core';

function UserCard() {
  const id = $signal(1);
  const user = $resource(id, (id) =>
    fetch(`/api/users/${id}`).then((r) => r.json())
  );

  return (
    <Suspense fallback={<p>Loading…</p>}>
      <p>{user()?.name}</p>
    </Suspense>
  );
}
```

### A. 背景情况

共享状态在树下 没有道具钻孔.

```tsx
import { createContext, useContext } from '@fluixi/core';

const ThemeContext = createContext<'light' | 'dark'>('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div class={theme}>…</div>;
}
```

### 路由器

路由器要一个 `routes` 配置; 嵌入路线渲染通过 `<Outlet />`,以及 `lazy()` 密码片.

```tsx
import { render } from '@fluixi/core';
import { Router, Outlet, lazy } from '@fluixi/core/router';

const routes = [
  {
    path: '/',
    component: () => (
      <div class="app">
        <nav>…</nav>
        <Outlet />
      </div>
    ),
    children: [
      { path: '', component: () => <h1>Home</h1> },
      { path: 'about', component: lazy(() => import('./About')) },
    ],
  },
];

render(() => <Router routes={routes} />, document.getElementById('app')!);
```

## 生命周期钩

```tsx
import { onMount, onCleanup } from '@fluixi/core';

function Clock() {
  const now = $signal(Date.now());

  onMount(() => {
    const id = setInterval(() => now.set(Date.now()), 1000);
    onCleanup(() => clearInterval(id));
  });

  return <time>{new Date(now()).toLocaleTimeString()}</time>;
}
```

## 衍生状态( B)

```tsx
import { batch } from '@fluixi/core';

const first = $signal('Ada');
const last = $signal('Lovelace');

// Memo — cached, recomputes only when a dependency changes
const fullName = $memo(() => `${first()} ${last()}`);

// Batch — coalesce multiple writes into one update
batch(() => {
  first.set('Grace');
  last.set('Hopper');
});
```

## 安全部门改革

服务器渲染、水合、基于文件的路由和编发/构建工具在 [`@fluixi/start`](https://www.npmjs.com/package/@fluixi/start)使用 `npm create fluixi` 并选择 SSR 模板.

## 类型脚本

Fluixi以TypeScript和船只全型写成. 在您中配置 JSX `tsconfig.json`数字 :

```json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@fluixi/jsx"
  }
}
```

## 生态系统

| 软件包 | 目的 |
| --- | --- |
| `@fluixi/core` | 框架外观:组件、控制流、路由器、渲染 |
| `@fluixi/reactive` | 信号、备忘录、效果、存储:可自行使用 |
| `@fluixi/dom` | DOM 渲染运行时间 |
| `@fluixi/compiler` | JSX和 `html` 直接DOM电话 |
| `@fluixi/vite-plugin` | 编译器作为 Vite 插件( 卷起、 建设和网络包适配器) |
| `@fluixi/start` | SSR,流线,SSG,文件路由,服务器功能,部署适配器 |
| `@fluixi/router` | 路线核心 |
| `@fluixi/server` | 服务器渲染 |
| `@fluixi/head` | 文件头和标准作业程序 |
| `@fluixi/ts-plugin` | 编辑器支持 `html` 模板 |
| `@fluixi/template-parser` | 这个 `html` 解析器, 独立 |
| `@fluixi/auth` • 妇女 `@fluixi/session` | 授权约束和会话 |
| `@fluixi/testing` • 妇女 `@fluixi/devtools` | 测试助手, 反应式绘图工具 |
| `@fluixi/cli` • 妇女 `create-fluixi` | 发电机和应用程序脚手架 |

## 许可证

麻省理工学院

## 链接

-   [无](https://www.npmjs.com/package/fluixi)

## 常见问题

### @fluixi/core 是什么？

框架以 DOM 运行时间、 反应核心、 路由器和 JSX 运行时间构建应用程序; 组件运行一次, 反应更新 DOM

### 如何安装 @fluixi/core？

在项目目录运行 npm install @fluixi/core，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@fluixi/dom（^1\.0\.0-alpha\.108）、@fluixi/jsx（^1\.0\.0-alpha\.108）、@fluixi/head（^1\.0\.0-alpha\.108）、@fluixi/router（^1\.0\.0-alpha\.108）、@fluixi/server（^1\.0\.0-alpha\.108）、@fluixi/storage（^1\.0\.0-alpha\.108）、@fluixi/reactive（^1\.0\.0-alpha\.108）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fluixi/core 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fluixi/core 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fluixi/core 可以商用吗？

@fluixi/core 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fluixi/core 的下载量有多少？

根据 npm 官方下载统计，@fluixi/core 在 2026/10/15 – 2026/11/13 这 30 天内被下载 5,979 次，日均约 199 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fluixi/core 还在维护吗？

最新版本 1\.0\.0-alpha\.108 发布于 2026/11/07（8 天前）；至今共发布 55 个版本，其中过去 12 个月发布了 55 个；首次发布于 2026/07/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。