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 [email protected] --features=csr我们这里使用非nightly版本，当然如果使用nightly版本的 话，需要新增
toolchain依赖，并设置默认使用nightly的命令，命令如下cargo add [email protected] --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文件夹，创建后运行通过。