leptos 第一个例子

leptos 第一个例子

下载安装rust下载

安装后可通过下面的命令判断是否安装成功。
```
rustup -V
```
当提示不是内部命令时，需要自行设置环境变量，我默认安装的路径为

C:\Users\{当前用户}\.cargo\bin

成功显示当前版本
安装trunk依赖包
```
cargo install trunk
```
创建一个rust项目

在特定的目录运行以下命令，创建一个rust项目，假设项目名称为leptos_first，则该命令为
```
cargo init leptos_first
```
创建后在特定目录下生成leptos_first文件夹及相关的rust配置文件及main.rs方法。
添加leptos依赖

截止到目前，leptos的最新版本为0.5.0-rc3，因此我们添加该依赖
```
cargo add leptos@0.5.0-rc3 --features=csr
```
我们这里使用非nightly版本，当然如果使用nightly版本的话，需要新增toolchain 依赖，并设置默认使用nightly的命令，命令如下
```
cargo add leptos@0.5.0-rc3 --features=csr,nightly
rustup toolchain install nightly
rustup default nightly
```
创建wasm32-unknown-unknown文件夹

在项目同级目录下创建一个target文件夹

目的是为了执行下面的一行命令
```
rustup target add wasm32-unknown-unknown
```
由于不创建直接运行该命令时，并没有创建成功，因此需要手工创建。
创建index.html文件夹

在leptos_first文件夹下创建index.html,并将以下内容放入到html文件中
```
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>
```

main.rs

修改main.rs，引入leptos，并向页面中输出Hello, world!

use leptos::*;

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

trunk serve --open

在leptos_first文件夹下运行trunk serve --open命令，等待一会后浏览器会自动打开http://127.0.0.1:8080/，并显示Hello, world!。

后台黑窗体如图

浏览器展示效果如图

注意

在运行时发现，如果出现以下错误

原因是没有创建wasm32-unknown-unknown文件夹，创建后运行通过。

posted @ 2023-09-28 08:45 摧残一生阅读(263) 评论(0) 编辑收藏举报

刷新页面返回顶部