mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
finish gettting-started part translation (#1997)
* Translate build-a-sample-app.md via GitLocalize * Translate choose-web-library.md via GitLocalize * Translate examples.md via GitLocalize * Translate starter-templates.md via GitLocalize Co-authored-by: sansx <646924078@qq.com>
This commit is contained in:
gitlocalize-app[bot]
GitHub
parent
316dad2f6b
commit
5465b22cc3
@ -1,45 +1,49 @@
|
||||
# 第一个简单的 App
|
||||
---
|
||||
title: 第一个简单的 App
|
||||
---
|
||||
|
||||
首先创建一个二进制项目:
|
||||
首先，创建一个新的 cargo 项目：
|
||||
|
||||
```bash
|
||||
cargo new --bin yew-app && cd yew-app
|
||||
cargo new yew-app
|
||||
```
|
||||
|
||||
添加 `yew` 到你的依赖库中（[这里](https://docs.rs/yew) 可以查看最新版本的 Yew）
|
||||
进入刚刚创建的目录。
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
```text
|
||||
现在，让我们在`Cargo.toml`文件中添加`yew`作为依赖项：
|
||||
|
||||
```toml
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
authors = ["Yew App Developer <name@example.com>"]
|
||||
edition = "2018"
|
||||
|
||||
[dependencies]
|
||||
yew = { version = "0.14.3", features = ["std_web"] }
|
||||
# 你可以在此处查看最新版本: https://crates.io/crates/yew
|
||||
yew = "0.18"
|
||||
```
|
||||
{% endcode %}
|
||||
|
||||
将这份代码复制到你的 `src/main.rs` 文件中:
|
||||
将以下代码复制到您的`src/main.rs`文件中：
|
||||
|
||||
{% code title="src/main.rs" %}
|
||||
```rust
|
||||
use yew::prelude::*;
|
||||
|
||||
struct Model {
|
||||
link: ComponentLink<Self>,
|
||||
value: i64,
|
||||
}
|
||||
|
||||
enum Msg {
|
||||
AddOne,
|
||||
}
|
||||
|
||||
struct Model {
|
||||
// `ComponentLink` is like a reference to a component.
|
||||
// It can be used to send messages to the component
|
||||
link: ComponentLink<Self>,
|
||||
value: i64,
|
||||
}
|
||||
|
||||
impl Component for Model {
|
||||
type Message = Msg;
|
||||
type Properties = ();
|
||||
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
|
||||
fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
Self {
|
||||
link,
|
||||
value: 0,
|
||||
@ -48,9 +52,20 @@ impl Component for Model {
|
||||
|
||||
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
||||
match msg {
|
||||
Msg::AddOne => self.value += 1
|
||||
Msg::AddOne => {
|
||||
self.value += 1;
|
||||
// the value has changed so we need to
|
||||
// re-render for it to appear on the page
|
||||
true
|
||||
}
|
||||
}
|
||||
true // 指示组件应该重新渲染
|
||||
}
|
||||
|
||||
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
|
||||
// Should only return "true" if new properties are different to
|
||||
// previously received properties.
|
||||
// This component has no properties so we will always return "false".
|
||||
false
|
||||
}
|
||||
|
||||
fn view(&self) -> Html {
|
||||
@ -64,21 +79,48 @@ impl Component for Model {
|
||||
}
|
||||
|
||||
fn main() {
|
||||
yew::initialize();
|
||||
App::<Model>::new().mount_to_body();
|
||||
yew::start_app::<Model>();
|
||||
}
|
||||
```
|
||||
{% endcode %}
|
||||
|
||||
这份代码将构建你的称为 `Model` 的 `Component` 根组件，它会显示一个按钮，当你点击它时，`Model` 将会更新自己的状态。特别注意 `main()` 中的 `App::<Model>::new().mount_to_body()`，它会启动你的应用并将其挂载到页面的 `<body>` 标签中。如果你想使用任何动态属性来启动应用程序，则可以使用 `App::<Model>::new().mount_to_body_with_props(..)`。
|
||||
这份代码通过一个 `Model` 构建了你的根 `组件`，它会显示一个按钮，当你点击按钮时，Model 将会更新自己的状态。特别注意 main() 中的 `yew::start_app::<Model>()`，它会启动你的应用并将其挂载到页面的 `<body>` 标签中。如果你想使用任何动态属性来启动应用程序，则可以使用 `yew::start_app_with_props::<Model>(..)`。
|
||||
|
||||
最后，将`index.html`文件添加当前应用的根目录下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Yew App</title>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 运行你的应用程序!
|
||||
|
||||
启动并运行你的应用的最快方式就是使用 [`cargo-web`](https://github.com/koute/cargo-web)。如果你还没有的话，请用 `cargo install cargo-web` 命令来安装这个工具然后通过运行下述命令来构建和启动一个开发服务器：
|
||||
如果尚未安装 [Trunk](https://github.com/thedodd/trunk)，请执行以下操作：
|
||||
|
||||
```bash
|
||||
cargo web start
|
||||
cargo install trunk wasm-bindgen-cli
|
||||
```
|
||||
|
||||
`cargo-web` 将会自动为你添加 `wasm32-unknown-unknown` 作为目标代码，然后构建你的应用，你的应用将默认在 [http://\[::1\]:8000](http://[::1]:8000) 被访问。可以通过 `cargo web start --help` 命令来获取更多选项和帮助。
|
||||
将`wasm32-unknown-unknown`添加为编译目标。 如果还未安装，请使用 Rustup 运行以下指令：
|
||||
|
||||
```bash
|
||||
rustup target add wasm32-unknown-unknown
|
||||
```
|
||||
|
||||
现在，您所要做的就是运行以下命令：
|
||||
|
||||
```bash
|
||||
trunk serve
|
||||
```
|
||||
|
||||
这将启动一个开发服务器，该服务器在您每次进行更改时都会更新应用程序。
|
||||
|
||||
## 常见问题
|
||||
|
||||
- Trunk 安装失败：
|
||||
|
||||
确保你已经安装了 openssl 的开发包。例如，Ubuntu 上的 libssl-dev 或 Fedora 上的 openssl-devel。
|
||||
|
||||
@ -1,23 +1,27 @@
|
||||
# 选择 web-sys 还是 stdweb
|
||||
---
|
||||
title: 选择一个web库
|
||||
---
|
||||
|
||||
## 简介
|
||||
|
||||
Yew 应用程序可以通过 [`web-sys`](https://docs.rs/web-sys) 或者 [`stdweb`](https://docs.rs/stdweb) 来构建。这两个 crates 提供了 Rust 和 Web API 之间的绑定。当把 `yew` 添加到你的 cargo 依赖时，你需要选择它们其中之一：
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
```rust
|
||||
```toml
|
||||
# 选择 `web-sys`
|
||||
yew = { version = "0.13", features = ["web_sys"] }
|
||||
yew = "0.17"
|
||||
|
||||
# 选择 `stdweb`
|
||||
yew = { version = "0.13", features = ["std_web"] }
|
||||
yew = { version = "0.17", package = "yew-stdweb" }
|
||||
```
|
||||
{% endcode %}
|
||||
|
||||
我们建议选择 `web-sys`，因为它是由 [Rust / Wasm 工作组](https://rustwasm.github.io/) 提供支持。
|
||||
|
||||
:::warning Yew 对`stdweb`的支持将会停留在v0.18 。它仍然接受补丁修复，但不会添加新功能。见[#1569](https://github.com/yewstack/yew/issues/1569) :::
|
||||
|
||||
## 示例用法
|
||||
|
||||
此示例说明了这两个库在使用中的差异。你不需要自己再运行一遍这个。
|
||||
|
||||
```rust
|
||||
// web-sys
|
||||
let window: web_sys::Window = web_sys::window().expect("window not available");
|
||||
@ -41,81 +45,81 @@ window.alert("hello from wasm!");
|
||||
|
||||
## 选择其中之一
|
||||
|
||||
当为你的应用程序选择使用 `web-sys` 还是 `stdweb` 时，有几个不同的角度需要考虑。注意，可以在一个应用程序中同时使用两者，但是为了最小化编译的 `.wasm` 二进制体积，最好选择其中之一。
|
||||
当你在`web-sys`与`stdweb`之间摇摆不定时，参考以下几个不同的角度进行考虑。请注意，可以在一个应用程序中同时使用这两种方法，但要最小化已编译 crate 的二进制大小，最好仅使用两者之一。
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: "left" }}></th>
|
||||
<th style={{ textAlign: "left" }}><code>web-sys</code>
|
||||
<th style="{{" textalign:></th>
|
||||
<th style="{{" textalign:>
|
||||
<code>web-sys</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>stdweb</code>
|
||||
<th style="{{" textalign:>
|
||||
<code>stdweb</code>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>项目状态</td>
|
||||
<td style={{ textAlign: "left" }}>由<a href="https://rustwasm.github.io/">Rust / Wasm 工作组</a>积极维护</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>超过四个月没有 Github 活动</td>
|
||||
<td style="{{" textalign:>项目状态</td>
|
||||
<td style="{{" textalign:>由 <a href="https://rustwasm.github.io/">Rust / Wasm 工作组</a>积极维护</td>
|
||||
<td style="{{" textalign:>超过八个月没有任何Github活动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>Web API 覆盖率</td>
|
||||
<td style={{ textAlign: "left" }}>Rust API 是从 Web IDL 规范自动生成，因此理论上有
|
||||
100% 的覆盖率。</td>
|
||||
<td style={{ textAlign: "left" }}>浏览器 API 是根据需求由社区添加</td>
|
||||
<td style="{{" textalign:>Web API 覆盖率</td>
|
||||
<td style="{{" textalign:>Rust API 是根据 Web IDL 规范自动生成的</td>
|
||||
<td style="{{" textalign:>浏览器 API 是根据需求由社区添加</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>Rust API 设计</td>
|
||||
<td style={{ textAlign: "left" }}>采取保守的方法，为大多数
|
||||
API 调用返回 <code>Result</code>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>通常拒绝返回 <code>Result</code> 而更倾向于使用
|
||||
panic。例如，在 worker 中调用 <code>stdweb::web::window()</code> 将
|
||||
panic。</td>
|
||||
<td style="{{" textalign:>Rust API 设计</td>
|
||||
<td style="{{" textalign:>采取保守的方法，为大多数 API 调用返回 <code>Result</code>
|
||||
</td>
|
||||
<td style="{{" textalign:>通常不会返回<code>Result</code>而更倾向于使用 panic。例如，在 worker 中调用 <code>stdweb::web::window()</code>将 panic。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>支持的构建工具</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<td style="{{" textalign:>支持的构建工具</td>
|
||||
<td style="{{" textalign:>
|
||||
<p></p>
|
||||
<ul>
|
||||
<li><code>wasm-bindgen</code>
|
||||
<li>
|
||||
<code>trunk</code>
|
||||
</li>
|
||||
<li><code>wasm-pack</code>
|
||||
<li>
|
||||
<code>wasm-pack</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<td style="{{" textalign:>
|
||||
<p></p>
|
||||
<ul>
|
||||
<li><code>cargo-web</code>
|
||||
</li>
|
||||
<li><code>wasm-bindgen</code>
|
||||
</li>
|
||||
<li><code>wasm-pack</code>
|
||||
<li>
|
||||
<code>cargo-web</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>支持生成的目标代码</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>
|
||||
<td style="{{" textalign:>支持生成的目标代码</td>
|
||||
<td style="{{" textalign:>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
<li>
|
||||
<code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
<li><code>wasm32-unknown-emscripten</code>
|
||||
</li>
|
||||
<li><code>asmjs-unknown-emscripten</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</td>
|
||||
<td style="{{" textalign:>
|
||||
<ul>
|
||||
<li>
|
||||
<code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>wasm32-unknown-emscripten</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>asmjs-unknown-emscripten</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>有关更多挑选构建工具的信息，请参阅 [Wasm 构建工具](project-setup/#wasm-build-tools) 指南。
|
||||
|
||||
</table>
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
# 通过例子学习
|
||||
---
|
||||
title: 通过例子学习
|
||||
---
|
||||
|
||||
Yew 的 github 项目中就包含了各种各样的示例（这些项目在不同程度的维护中）。我们建议仔细地学习它们, 了解如何使用不同的框架特性. 我们在书中有纰漏和错误的时候也欢迎 pull-requests 和提交 issues ♥️
|
||||
Yew 的 github 项目中就包含了各种各样的[示例]（这些项目在不同程度的维护中）。我们建议你仔细地学习它们, 以了解如何使用不同的框架特性. 我们在书中有纰漏和错误的时候也欢迎 pull-requests 和提交 issues ♥️
|
||||
|
||||
* [**Todo App（代办事项）\(stdweb\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/std_web/todomvc)
|
||||
* [**Todo App（代办事项）\(web\_sys\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/web_sys/todomvc)
|
||||
* [**Custom Components（自定义 Component 组件）**](https://github.com/yewstack/yew/tree/v0.14.0/examples/custom_components)
|
||||
* [**Multi-threading \(Agents\)（多线程 Agents）\(stdweb\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/std_web/multi_thread)
|
||||
* [**Multi-threading \(Agents\)（多线程 Agents）\(web\_sys\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/web_sys/multi_thread)
|
||||
* [**Timer Service（计时器）**](https://github.com/yewstack/yew/tree/v0.14.0/examples/timer)
|
||||
* [**Nested Components（嵌套 Component 组件）**](https://github.com/yewstack/yew/tree/v0.14.0/examples/nested_list)
|
||||
有关包括示例列表在内的更多详细信息，请参阅[README](https://github.com/yewstack/yew/tree/v0.18/examples)。
|
||||
|
||||
|
||||
[示例]: https://github.com/yewstack/yew/tree/v0.18/examples
|
||||
@ -1,16 +1,22 @@
|
||||
# 新手模板
|
||||
---
|
||||
title: 新手模板
|
||||
---
|
||||
|
||||
## `trunk`
|
||||
|
||||
- [最简模板](https://github.com/yewstack/yew-trunk-minimal-template) - 通过Trunk构建的小型应用程序，可以帮助快速您入门。
|
||||
|
||||
## `wasm-pack`
|
||||
|
||||
* [Minimal Template](https://github.com/yewstack/yew-wasm-pack-minimal) - 使用 `wasm-pack` 和 `rollup` 来构建你的应用, 并使用你自己的服务器来部署它，No bells or whistles here.
|
||||
* [Webpack Template](https://github.com/yewstack/yew-wasm-pack-template) - 使用 `wasm-pack` 和 wasm-pack 的插件 [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) 来简化开发。
|
||||
- [Minimal Template](https://github.com/yewstack/yew-wasm-pack-minimal) - 使用 `wasm-pack` 和 `rollup` 来构建你的应用, 并使用你自己的服务器来部署它，No bells or whistles here.
|
||||
|
||||
使用这些例子和使用 `cargo-web` 的最重要的区别是 它们 使用了 `lib` 类型 而非 `bin` 类型的工程，同时你的应用的入口应该使用 `#[wasm_bindgen]` 标记出来。
|
||||
- [Webpack模板](https://github.com/yewstack/yew-wasm-pack-template) - 使用`wasm-pack`和Webpack 插件 [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)来简化开发。
|
||||
|
||||
你的 `Cargo.toml` 同样应该指明你的工程的 crate-type 是 "cdylib" 。
|
||||
与其他工具不同， `wasm-pack`强制您使用`lib`而不是`bin` crate，并且程序的入口需要用`#[wasm_bindgen(start)]`属性进行标注。
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
```text
|
||||
你的 `Cargo.toml` 同样应该指明你的工程的 crate 类型是 "cdylib" 。
|
||||
|
||||
```toml
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
@ -18,15 +24,18 @@ authors = ["Yew App Developer <name@example.com>"]
|
||||
edition = "2018"
|
||||
|
||||
[lib]
|
||||
crate-type = ["cdylib"]
|
||||
# You should include "rlib" (the default crate type) otherwise your crate can't be used as a Rust library
|
||||
# which, among other things, breaks unit testing
|
||||
crate-type = ["rlib", "cdylib"]
|
||||
|
||||
[dependencies]
|
||||
yew = { version = "0.13.0", features = ["web_sys" OR "std_web"] }
|
||||
# for web_sys
|
||||
yew = "0.17"
|
||||
# or for stdweb
|
||||
# yew = { version = "0.17", package = "yew-stdweb" }
|
||||
wasm-bindgen = "0.2"
|
||||
```
|
||||
{% endcode %}
|
||||
|
||||
## Parcel
|
||||
|
||||
* [Parcel Template](https://github.com/spielrs/yew-parcel-template) - 由一位社区成员建立并使用了 [Parcel](https://parceljs.org/) 。
|
||||
## 其他模板
|
||||
|
||||
- [Parcel Template](https://github.com/spielrs/yew-parcel-template) - 由一位社区成员建立并使用了 [Parcel](https://parceljs.org/) 。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user