Leptos_001 快速开始

WITplus
0 阅读2分钟

Leptos教程 快速开始

跑到最前面的总结

  • 本篇写了什么
    • 如何使用 leptos 的 csr 开发模式创建一个简单的静态网页
    • 如何使用 console_error_panic_hook 讲 rust 程序的错误信息输出到 console 中
    • 模板代码的使用
  • leptos 是什么
    • Leptos 是一个现代化的 Rust 前端框架，用于构建高效的 Web 应用程序。
    • 它采用了类似于 React 的声明式编程模型，使得开发者能够用直观的方式创建复杂的用户界面，同时保持高性能。
    • Leptos 将 Rust 的内存安全和并发优势带入了前端开发，结合 WebAssembly (Wasm) 使得应用可以在浏览器中高效运行。
    • Leptos 的最大特点是它与 Rust 的生态高度集成，利用 Rust 的强类型系统、并发模型和性能优势，让开发者能够在浏览器端和服务器端都获得一致的编程体验。

工欲善其事,必先利其器

本篇是基于 trubk 的 客户端渲染(csr)方式开发的简单教程, 第一步当然是安装 trunk

$ cargo install trunk

使用 cargo 初始化一个项目并下载 leptos 这个 crate , feature 是csr 用于客户端渲染的静态页面开发

$ cargo new leptos_tutoral
$ cd leptos_tutoral
$ cargo add leptos --features=csr
$ cargo build

最终代码编译为WebAssembly , 所以需要添加正确的 target

$ rustup target add wasm32-unknown-unknown

还得是 "Hello World"

最终的结果是由一个 index.html 作为载体的 , 所以需要现在根目录创建它

index.html

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

编辑 src/main.rs 实现简单的 hello world 程序:

use leptos::prelude::*;

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

此时的目录大概是下面这样:

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

现在只需要执行 trunk serve --open 就可以在浏览器中看到最终的页面了 , Trunk服务器将在文件更改时重新加载应用程序，使开发相对无缝。

有用的浏览器报错

默认情况下，在浏览器中运行WASM代码时发生的恐慌只会在浏览器中抛出一个错误，并显示一个无用的消息，如Unreachable executed和指向WASM二进制文件的堆栈跟踪。

image.png

对于我们来说这是一条无用的消息 , 我们可以使用 console_error_panic_hook 在浏览器中获得 rust 代码中的跟踪信息 , 以及到底是错误中的哪一行

首先在项目中添加 console_error_panic_hook 这个 crate

$ cargo add console_error_panic_hook

在项目主函数中添加下面代码 , 就可以在浏览器的 console 中看到有用的错误信息以及错误位置了

fn main(){
    console_error_panic_hook::set_once();
    // ...
}

image.png

从模板构建

需要使用 cargo-generate 从指定 github 地址的模版项目中创建

$ cargo install cargo-generate
$ cargo generate --git https://github.com/leptos-community/start-csr

image.png

此时就可以通过 trunk serve --port 3000 --open 在浏览器中看到模板页面了

image.png

视频: b 站

参考: book.leptos.dev/

avatar
文章
阅读
粉丝