安装与项目设置
euv 是一个 Rust + WASM 前端 UI 框架，它将响应式信号、虚拟 DOM 和声明式宏的强大功能带到了浏览器中。本指南将带你完成设置新 euv 项目的每一步，从安装工具链到在浏览器中运行你的第一个应用。
前置条件
在开始之前，请确保你的系统上已安装以下内容：
- Rust（最新稳定版）—— 如果尚未安装，请通过 rustup 安装
- wasm-pack —— Rust 生成的 WebAssembly 的构建工具
- 现代浏览器 —— Chrome、Firefox、Edge 或 Safari
你可以通过以下命令验证 Rust 安装：
rustc --version
cargo --version
如果尚未安装 wasm-pack，请使用以下命令安装：
cargo install wasm-pack
创建新项目
首先使用 Cargo 生成一个新的 Rust 项目：
cargo new my-euv-app
cd my-euv-app
这会创建一个标准的 Rust 库项目。打开生成的 Cargo.toml 文件，更新它以包含 WASM 项目所需的配置：
[package]
name = "my-euv-app"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib"]
[dependencies]
euv = "0.1"
wasm-bindgen = "0.2"
crate-type = ["cdylib"] 条目告诉 Rust 编译器生成适合 WASM 的动态库。wasm-bindgen 依赖提供了 Rust 和 JavaScript 之间的桥梁。
添加 euv
配置好 Cargo.toml 后，将 euv 添加到你的项目中：
cargo add euv
此命令会自动将最新版本的 euv 添加到你的依赖中。你可以通过检查 Cargo.toml 来确认是否添加成功：
cargo add euv
设置 HTML 入口文件
在项目根目录（不在 src/ 内）创建一个 index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My euv App</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import init from './pkg/my_euv_app.js';
init();
</script>
</body>
</html>
<div id="app"> 元素充当 euv 渲染应用的挂载点。JavaScript 导入加载编译后的 WASM 模块并初始化它。
编写你的第一个 euv 代码
将 src/lib.rs 的内容替换为以下代码：
use euv::*;
fn app() -> VirtualNode {
html! {
div {
h1 { "Hello, euv!" }
}
}
}
mount("#app", app);
这个最小示例从 euv crate 导入所有内容，定义一个返回 VirtualNode 的组件函数，并将其挂载到 DOM 中的 #app 元素。
构建项目
要将项目编译为 WASM，请运行：
wasm-pack build --target web
此命令将你的 Rust 代码编译为 WebAssembly，并在 pkg/ 目录中生成 JavaScript 包装文件。--target web 标志生成可直接在浏览器中使用 ES 模块加载的输出。
构建成功后，你应该看到 pkg/ 目录包含：
my_euv_app_bg.wasm—— 编译后的 WebAssembly 二进制文件my_euv_app.js—— JavaScript 粘合代码package.json—— 包的元数据
在浏览器中运行
对于本地开发，你需要一个简单的 HTTP 服务器。可以使用任何静态文件服务器：
# 使用 Python
python -m http.server 8080
# 使用 Node.js（通过 npx）
npx serve .
# 使用 Rust（通过 basic-http-server）
cargo install basic-http-server
basic-http-server .
然后在浏览器中打开 http://localhost:8080。你应该会在页面上看到 "Hello, euv!"。
项目结构概览
一个典型的 euv 项目具有以下结构：
my-euv-app/
├── Cargo.toml # 项目配置和依赖
├── Cargo.lock # 锁定的依赖版本
├── index.html # HTML 入口文件
├── src/
│ └── lib.rs # 主应用代码
├── pkg/ # 生成的 WASM 输出（构建后）
│ ├── my_euv_app_bg.wasm
│ └── my_euv_app.js
└── target/ # Rust 构建产物
使用渲染功能
euv 的渲染器使用增量渲染来高效地更新 DOM。它采用 Keyed Diffing（键控差异比较）来最小化列表变化时的不必要 DOM 操作，并使用事件委托来高效处理多个元素的事件，无需附加单独的监听器。
当你调用 mount("#app", app) 时，euv 会获取你的 app 函数返回的 VirtualNode，并将其渲染到匹配 #app 选择器的 DOM 元素中。在后续更新中，虚拟 DOM 差异算法会计算所需的最小变更集。
理解虚拟 DOM
euv 的核心是 VirtualNode 类型，它有多个变体：
- Element —— 标准 HTML 元素，如
div、span或h1 - Text —— 纯文本节点
- Fragment —— 没有包装元素的节点集合
- Dynamic —— 可响应式变化的节点
- Empty —— 不渲染任何内容
每个元素由一个 Tag 枚举标识：
- Element(String) —— 标准 HTML 标签名
- Component(String) —— 自定义组件名
这种虚拟表示使 euv 能够在渲染之间计算高效的差异。
下一步
现在你的项目已经设置完成并运行起来了，你可以探索 euv 的核心概念：
- 响应式信号 —— 了解
use_signal、computed!和watch!如何驱动响应式 UI - html! 宏 —— 掌握用于构建虚拟 DOM 树的声明式语法
- class! 宏 —— 使用 CSS 类、伪类和媒体查询为组件添加样式
- 组件系统 —— 使用 props 和 children 构建可复用组件
本系列的后续文章将详细介绍以上每个主题。
