Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

第一部分:构建用户界面

Part 1: Building User Interfaces

在本书的第一部分,我们将研究如何使用 Leptos 在客户端构建用户界面。在底层,Leptos 和 Trunk 将一小段 JavaScript 代码打包在一起,用于加载已编译为 WebAssembly 的 Leptos UI,从而驱动你的 CSR(客户端渲染)网站中的交互。

In the first part of the book, we're going to look at building user interfaces on the client-side using Leptos. Under the hood, Leptos and Trunk are bundling up a snippet of Javascript which will load up the Leptos UI, which has been compiled to WebAssembly to drive the interactivity in your CSR (client-side rendered) website.

第一部分将向你介绍构建由 Leptos 和 Rust 驱动的响应式用户界面所需的基础工具。到第一部分结束时,你应该能够构建一个在浏览器中渲染的、响应迅速的同步网站,并可以将其部署在任何静态网站托管服务上,如 GitHub Pages 或 Vercel。

Part 1 will introduce you to the basic tools you need to build a reactive user interface powered by Leptos and Rust. By the end of Part 1, you should be able to build a snappy synchronous website that's rendered in the browser and which you can deploy on any static-site hosting service, like Github Pages or Vercel.

信息

为了从本书中获得最大收益,我们鼓励你按照提供的示例编写代码。在快速入门Leptos DX 章节中,我们向你展示了如何使用 Leptos 和 Trunk 设置一个基础项目,包括在浏览器中进行 WASM 错误处理。该基础设置足以让你开始使用 Leptos 进行开发。

To get the most out of this book, we encourage you to code along with the examples provided. In the Getting Started and Leptos DX chapters, we showed you how to set up a basic project with Leptos and Trunk, including WASM error handling in the browser. That basic setup is enough to get you started developing with Leptos.

如果你更愿意从一个功能更齐全的模板开始,该模板演示了如何设置一些你在实际 Leptos 项目中会见到的基础功能,例如路由(本书稍后会介绍)、向页面头部注入 <Title><Meta> 标签,以及其他一些便捷功能,那么请随意利用 leptos-rs 的 start-trunk 模板仓库来启动并运行项目。

If you'd prefer to get started using a more full-featured template which demonstrates how to set up a few of the basics you'd see in a real Leptos project, such as routing, (covered later in the book), injecting <Title> and <Meta> tags into the page head, and a few other niceties, then feel free to utilize the leptos-rs start-trunk template repo to get up and running.

start-trunk 模板要求你安装了 Trunkcargo-generate,你可以通过运行 cargo install trunkcargo install cargo-generate 来获取它们。

The start-trunk template requires that you have Trunk and cargo-generate installed, which you can get by running cargo install trunk and cargo install cargo-generate.

要使用该模板设置你的项目,只需运行

To use the template to set up your project, just run

cargo generate --git https://github.com/leptos-rs/start-trunk

然后运行

then run

trunk serve --port 3000 --open

在新建应用的目录中运行上述命令即可开始开发你的应用。Trunk 服务器会在文件更改时重新加载你的应用,使开发过程相对无缝。

in the newly created app's directory to start developing your app. The Trunk server will reload your app on file changes, making development relatively seamless.