Rust Leptos 集成 Tailwind CSS 构建前端应用

Leptos 是一个 Rust 编写的全栈式框架。既类似于 Vue、React 这样的前端框架可以结合 Tailwind CSS 来构建漂亮的交互式 Web 应用，又可以结合 Rust 语言实现后端功能。

1、安装 leptos

在已经安装好 Rust 开发环境的前提下，先安装 leptos

cargo install trunk

2、创建 leptos 项目

cargo init hello-leptos

添加 csr 依赖

cargo add leptos --features=csr

3、安装 wasm 编译环境

如果已经提前安装了，则可以省略，可以使用 rustup target list 命令查看。

rustup target add wasm32-unknown-unknown

4、创建 index.html

在 hello-leptos 项目根目录下创建 index.html 文件。

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

5、修改 main.rs

将 main.rs 内容替换成 letpos，挂载代码。

use leptos::*;

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

6、运行 letpos 项目

trunk serve --open