快速开始

1. 安装

bash

npm install @jianghuizhong/wasmux

2. 最小示例

方式一：HTML 完整示例

可直接保存为 index.html，通过 Vite/Webpack 或本地服务器运行（需模块化环境）：

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WasmUX 示例</title>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { WasmUXApp } from '@jianghuizhong/wasmux';

    const container = document.getElementById('app');
    const app = new WasmUXApp(container, {
      root: container,
      syntax: 'template',
    });
    app.mount('<div class="app"><h1>Hello WasmUX!</h1></div>');
  </script>
</body>
</html>

方式二：JSX 语法

javascript

import { WasmUXApp, compile } from '@jianghuizhong/wasmux';

const container = document.getElementById('app');
const app = new WasmUXApp(container, { root: container, syntax: 'jsx' });
const vnode = compile('<div className="app"><h1>Hello WasmUX!</h1></div>', 'jsx');
app.mount(vnode);

方式三：响应式 + data

javascript

import { WasmUXApp, ref, reactive } from '@jianghuizhong/wasmux';

const container = document.getElementById('app');
const app = new WasmUXApp(container, {
  root: container,
  syntax: 'template',
  data: () => ({ title: 'Hello', items: [{ id: 1, name: 'Item 1' }] }),
});
app.mount(`
  <div class="app">
    <h1>{{ title }}</h1>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </div>
`);

3. ⚠️ 模板必须单根

Vue 模板编译器对多根节点（Fragment）处理不完整，只渲染第一个元素。务必用单一根包裹：

javascript

// ❌ 错误：多根，只显示 h1
app.mount('<h1>标题</h1><p>内容</p>');

// ✅ 正确：单根
app.mount('<div><h1>标题</h1><p>内容</p></div>');

→ 查看完整模板语法