526互联

leptos 第一个例子

发布时间 2023-09-28 08:53:19作者: 摧残一生

leptos 第一个例子

  1. 下载安装rust下载

    安装后可通过下面的命令判断是否安装成功。

    rustup -V

    当提示不是内部命令时，需要自行设置环境变量，我默认安装的路径为

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

    成功显示当前版本

  2. 安装trunk依赖包

    cargo install trunk

  3. 创建一个rust项目

    在特定的目录运行以下命令，创建一个rust项目，假设项目名称为leptos_first，则该命令为

    cargo init leptos_first

    创建后在特定目录下生成leptos_first文件夹及相关的rust配置文件及main.rs方法。

  4. 添加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

  5. 创建wasm32-unknown-unknown文件夹

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

    目的是为了执行下面的一行命令

    rustup target add wasm32-unknown-unknown

    由于不创建直接运行该命令时，并没有创建成功，因此需要手工创建。

  6. 创建index.html文件夹

    在leptos_first文件夹下创建index.html,并将以下内容放入到html文件中

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

  7. main.rs

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

    use leptos::*;

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

  8. trunk serve --open

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

    后台黑窗体如图

    浏览器展示效果如图

注意

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

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