Rust Leptos 入门教程

Leptos 是一个类似于 Solid （JavaScript）和 Sycamore（Rust）等的框架。与其他框架如React（JavaScript），Svelte（JavaScript），Yew（Rust）和Dioxus（Rust）有一些相似之处，因此了解其中一个框架也可能使理解Leptos更容易。

入门

Leptos 有两种基本入门途径：

客户端渲染使用 Trunk
全栈渲染使用 cargo-leptos

对于早期的示例，最简单的方法是从 Trunk 开始。 cargo-leptos 我们将在本文后面介绍。

如果您还没有安装它，您可以通过运行下面命令来安装 Trunk

cargo install trunk

创建一个基本的 Rust 项目

cargo init leptos-tutorial

cd 到新目录 leptos-tutorial 项目中并添加 leptos 为依赖项

cargo add leptos --features=csr,nightly

或者，如果您使用的是稳定的 Rust，则可以不使用 nighly

cargo add leptos --features=csr

使用 nightly Rust 和 Leptos 中的 nightly 功能，可以为本文大部分内容中使用的信号获取器和设置器启用函数调用语法。
要使用 nightly Rust，你可以运行
rustup toolchain install nightly
rustup default nightly
如果你更喜欢在 Leptos 中使用稳定的 Rust，你也可以这样做。在指南和示例中，您只需使用 ReadSignal::get() and WriteSignal::set() 方法，而不是将信号获取器和 setter 作为函数调用。

确保你已经添加了 wasm32-unknown-unknown 目标，以便 Rust 可以将你的代码编译到 WebAssembly 中以在浏览器中运行。

rustup target add wasm32-unknown-unknown

在 leptos-tutorial 目录的根目录中创建一个简单 index.html

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

并添加一个简单的“Hello World！" main.rs

use leptos::*;

fn main() {
mount_to_body(|cx| view! { cx,  <p>"Hello, world!"</p> })
}

您的目录结构现在应如下所示

leptos_tutorial
├── src
│   └── main.rs
├── Cargo.toml
├── index.html

现在从目录的根 leptos-tutorial 目录运行 trunk serve --open 。Trunk 应该会自动编译您的应用程序并在默认浏览器中打开它。如果您对进行 main.rs 编辑，Trunk 将重新编译您的源代码并实时重新加载页面。