mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
update translation docs (#1993)
* Translate how-it-works.md via GitLocalize * Translate router.md via GitLocalize * Translate project-setup.md via GitLocalize * Translate roadmap.md via GitLocalize Co-authored-by: sansx <646924078@qq.com>
This commit is contained in:
gitlocalize-app[bot]
GitHub
parent
8bf59dec0e
commit
e474533daf
@ -16,7 +16,7 @@ description: 有关框架的底层细节
|
||||
请注意，在查看扩展的宏代码时，您可能会遇到异常冗长的代码。因为生成的代码有时可能会与应用程序中的其他代码冲突。为了防止出现问题，请保持`proc_macro` 的“卫生”。以下是一些示例：
|
||||
|
||||
1. 使用`::yew::<module>` 而不是 `yew::<module>` 来保证对Yew包的正确引用。这也是为什么呼吁使用`::alloc::vec::Vec::new()`来代替`Vec::new()`调用。
|
||||
2. 由于潜在的trait方法名称冲突，使用`<Type as Trait>`来确保我们使用的是正确的trait。
|
||||
2. 为了避免潜在的trait方法名称冲突，使用`<Type as Trait>`来确保我们使用的是正确的trait。
|
||||
|
||||
## 什么是虚拟DOM？
|
||||
|
||||
@ -36,4 +36,4 @@ Yew 的虚拟 DOM 与浏览器 DOM 并不是完全对应的。它还包括用于
|
||||
|
||||
- [从 Rust Book 中了解更多宏的信息](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
|
||||
- [更多有关`cargo-expand`的信息](https://github.com/dtolnay/cargo-expand)
|
||||
- [`yew::virtual_dom`的 API 文档](https://docs.rs/yew/*/yew/virtual_dom/index.html)
|
||||
- [在API文档中查看`yew::virtual_dom`](https://docs.rs/yew/*/yew/virtual_dom/index.html)
|
||||
|
||||
@ -83,4 +83,4 @@ Switch trait 适用于比字符串更结构化的捕获组。你可以指定实
|
||||
|
||||
## 相关例子
|
||||
|
||||
- [Router](https://github.com/yewstack/yew/tree/master/examples/router)
|
||||
- [Router](https://github.com/yewstack/yew/tree/v0.18/examples/router)
|
||||
|
||||
@ -1,138 +1,52 @@
|
||||
---
|
||||
title: 项目设置
|
||||
sidebar_label: 介绍
|
||||
description: 为成功做好准备
|
||||
---
|
||||
|
||||
# 项目设置
|
||||
|
||||
## Rust
|
||||
|
||||
首先 ，你需要安装 Rust 。如何安装 Rust 和 `cargo` 构建工具，请参考[官方说明](https://www.rust-lang.org/tools/install)。
|
||||
|
||||
此外，为了将 Rust 编译为 Wasm，您还需要安装`wasm32-unknown-unknown`。如果你使用的是 rustup，只需运行`rustup target add wasm32-unknown-unknown` 。
|
||||
|
||||
:::important Yew 支持的最低 Rust 版本 (MSRV) 是`1.49.0` 。旧版本可能会导致意外问题，并伴有难以理解的错误消息。你可以使用 `rustup show` （在“active toolchain”下）或 `rustc --version`检查您的工具链版本。要更新您的工具链，请运行`rustup update` 。 :::
|
||||
|
||||
## **Wasm 构建工具**
|
||||
|
||||
需要安装额外的工具以方便 WebAssembly 与 JavaScript 间的相互操作。此外，根据你选择的工具，他们可以生成所有必需的 JavaScript 包装代码来让你的应用程序中的 `.wasm` 文件运行在浏览器中，从而帮助减轻部署和打包的麻烦。
|
||||
|
||||
### [**`trunk`**](https://github.com/thedodd/trunk/)
|
||||
|
||||
一个实际是为了构建 Yew 应用程序的而制作的工具。它可以构建任何基于`wasm-bindgen`的应用程序，其设计灵感来自 rollup.js。使用 Trunk，您无需安装 Node.js 或接触任何 JavaScript 代码。它可以将资源（assets）绑定到的你的应用程序，甚至附带 Sass 编译器。
|
||||
|
||||
我们所有的示例都基于Trunk构建。
|
||||
|
||||
[开始使用 `trunk`](project-setup/using-trunk.md)
|
||||
|
||||
### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)
|
||||
|
||||
一个由 Rust / Wasm 工作组开发的用于打包 WebAssembly 的 CLI 工具。与 Webpack 的 [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) 插件搭配使用最佳。
|
||||
由 Rust / Wasm 工作组开发的用于打包 WebAssembly 的 CLI 工具。最好与[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)一起使用。 `wasm-pack`的主要目的是构建用于 JavaScript 的 Wasm 库。因此，它只能构建库，不提供开发服务器或自动重建等有用工具。
|
||||
|
||||
[开始使用 wasm-pack](project-setup/using-wasm-pack.md)
|
||||
|
||||
### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
|
||||
|
||||
同时是一个库和一个 CLI 工具，也是由 Rust / Wasm 工作组开发。它是一个促进 JS 和 WebAssembly 之间互操作性的底层工具（在 `wasm-pack` 内部被用到）。我们不建议直接使用 `wasm-bindgen` 因为它需要手写一些 JavaScript 代码来引导你的 WebAssembly 二进制程序。但是，直接使用它也是可能的并且可以在 [**`wasm-bindgen` 指南**](https://rustwasm.github.io/docs/wasm-bindgen/) 上找到更多信息。
|
||||
|
||||
[开始使用 wasm-bindgen](project-setup/using-wasm-bindgen.md)
|
||||
[开始使用 `wasm-pack`](project-setup/using-wasm-pack.md)
|
||||
|
||||
### [**`cargo-web`**](https://github.com/koute/cargo-web)
|
||||
|
||||
在 `wasm-pack` 和 `wasm-bindgen` 被介绍前的首选 web 工作流工具。它仍然是**最快捷**的启动和运行方式，值得安装以运行尚未迁移到支持 `wasm-pack` 的示例程序。
|
||||
在`wasm-bindgen`创造之前，可以称之为首选的最佳工具。
|
||||
|
||||
[开始使用 cargo-web](project-setup/using-cargo-web.md)
|
||||
[开始使用 `cargo web`](project-setup/using-cargo-web.md)
|
||||
|
||||
### 对比
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: "left" }}></th>
|
||||
<th style={{ textAlign: "left" }}><code>wasm-pack</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>wasm-bindgen</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>cargo-web</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" }}>由 <a href="https://rustwasm.github.io/">Rust / Wasm 工作组</a>积极维护</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>超过六个月没有 Github 活动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>开发体验</td>
|
||||
<td style={{ textAlign: "left" }}>接近完美！需要 <code>webpack</code> 以获得最佳体验。</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>比较基础。你需要编写一些脚本来简化你的开发体验。</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>管用！自带“电池”，不需要外部依赖。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>本地服务器</td>
|
||||
<td style={{ textAlign: "left" }}>通过 <code>webpack</code> 插件支持</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>不支持</td>
|
||||
<td style={{ textAlign: "left" }}>支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>根据本地更改自动重新构建</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>通过 <code>webpack</code> 插件支持</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>不支持</td>
|
||||
<td style={{ textAlign: "left" }}>支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>无头浏览器测试</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-pack/commands/test.html">支持</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">支持</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://github.com/koute/cargo-web#features">支持</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>支持生成的目标代码</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}><code>web-sys</code>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
<td style={{ textAlign: "left" }}>不兼容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}><code>stdweb</code>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>示例用法</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://github.com/yewstack/yew-wasm-pack-minimal">新手模板</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>Yew 示例程序的<a href="https://github.com/yewstack/yew/blob/master/examples/build_all.sh">构建脚本</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>Yew 示例程序的<a href="https://github.com/yewstack/yew/blob/master/examples/build_all.sh">构建脚本</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
| `trunk` | `wasm-pack` | `cargo-web`
|
||||
--- | --- | --- | ---
|
||||
项目状态 | 积极维护 | [由 Rust / Wasm 工作组](https://rustwasm.github.io)积极维护 | 超过 6 个月没有 Github 活动
|
||||
开发体验 | 开箱即用！无需任何外部依赖。 | 比较基础。你需要编写一些脚本来简化你的开发体验或者使用webpack插件版本。 | 适用于代码层面，但需要单独的资产通道。
|
||||
本地服务器 | 支持 | 仅限webpack插件版本 | 支持
|
||||
根据本地更改自动重新构建 | 支持 | 仅限webpack插件版本 | 支持
|
||||
资源处理 | 支持 | 仅限webpack插件版本 | 仅限静态资源
|
||||
无头浏览器测试 | [开发中](https://github.com/thedodd/trunk/issues/20) | [支持](https://rustwasm.github.io/wasm-pack/book/commands/test.html) | [支持](https://github.com/koute/cargo-web#features)
|
||||
支持生成的目标代码 | <ul><li><code>wasm32-unknown-unknown</code></li></ul> | <ul><li><code>wasm32-unknown-unknown</code></li></ul> | <ul> <li><code>wasm32-unknown-unknown</code></li> <li><code>wasm32-unknown-emscripten</code></li> <li><code>asmjs-unknown-emscripten</code></li> </ul>
|
||||
`web-sys` | 兼容 | 兼容 | 不兼容
|
||||
`stdweb` | 不兼容 | 兼容 | 兼容
|
||||
示例用法 | <a href="https://github.com/yewstack/yew-wasm-pack-minimal">简单的示例</a> | [新手模板](https://github.com/yewstack/yew-wasm-pack-minimal) | `yew-stdweb` 示例程序的[构建脚本](https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples)
|
||||
|
||||
@ -1,40 +1,41 @@
|
||||
---
|
||||
title: 路线图
|
||||
description: Yew 框架规划功能的路线图
|
||||
---
|
||||
|
||||
# 路线图
|
||||
## 优先次序
|
||||
|
||||
## `v1.0.0`
|
||||
由社区决定将来特性的开发优先度以及需要侧重的关注点。 在2020年春季，发起过开发者调查问卷，收集有关项目发展方向的反馈。您可以在[Yew Wiki](https://github.com/yewstack/yew/wiki/Dev-Survey-%5BSpring-2020%5D)中找到摘要。
|
||||
|
||||
### 规划中的功能
|
||||
:::note 所有主要计划都可以在 Yew Github[项目板](https://github.com/yewstack/yew/projects) 中查看进展 :::
|
||||
|
||||
* 标记 key 的列表项：[https://github.com/yewstack/yew/issues/479](https://github.com/yewstack/yew/issues/479)
|
||||
* 路由：[https://github.com/yewstack/yew\_router](https://github.com/yewstack/yew_router)
|
||||
## 关注点
|
||||
|
||||
### 生产环境准备
|
||||
1. 高优先级的功能
|
||||
2. 生产环境预备
|
||||
3. 文档
|
||||
4. 痛点
|
||||
|
||||
* 浏览器兼容性
|
||||
* 提高 Yew 框架的测试覆盖率
|
||||
* 增加性能基准测试：[https://github.com/yewstack/yew/issues/5](https://github.com/yewstack/yew/issues/5)
|
||||
### 高优先级的功能
|
||||
|
||||
### 指南
|
||||
1. [函数式组件](https://github.com/yewstack/yew/projects/3)
|
||||
2. [组件库](https://github.com/yewstack/yew/projects/4)
|
||||
3. 更好的状态管理
|
||||
4. [服务端渲染](https://github.com/yewstack/yew/projects/5)
|
||||
|
||||
* 最佳实践：[https://yew.rs/optimizations](https://yew.rs/optimizations)
|
||||
* 端到端教程
|
||||
* Futures / 并发
|
||||
* CSS / 样式
|
||||
* 测试
|
||||
* 状态管理
|
||||
### 为了在生产环境使用还需解决的需求
|
||||
|
||||
## 未来
|
||||
- 提高 Yew 框架的测试覆盖率
|
||||
- 缩减二进制文件的大小
|
||||
- [基准表现](https://github.com/yewstack/yew/issues/5)
|
||||
|
||||
### 潜在功能
|
||||
### 文档
|
||||
|
||||
* 服务端渲染：[https://github.com/yewstack/yew/issues/41](https://github.com/yewstack/yew/issues/41)
|
||||
* 组件库：[https://github.com/yewstrap/yewstrap](https://github.com/yewstrap/yewstrap)
|
||||
* 代码分割：[https://github.com/yewstack/yew/issues/599](https://github.com/yewstack/yew/issues/599)
|
||||
* 允许不同的虚拟 DOM 后端：[https://github.com/yewstack/yew/issues/482](https://github.com/yewstack/yew/issues/482)
|
||||
* 反思 Services：[https://github.com/yewstack/yew/issues/364](https://github.com/yewstack/yew/issues/364)
|
||||
* 成熟的工具包：[https://github.com/yewstack/yewtil](https://github.com/yewstack/yewtil)
|
||||
* HTML 模板备选方案：[https://github.com/yewstack/yew/issues/438](https://github.com/yewstack/yew/issues/438)
|
||||
- 创建教程
|
||||
- 简化项目设置
|
||||
|
||||
### 痛点
|
||||
|
||||
- [组件样板](https://github.com/yewstack/yew/issues/830)
|
||||
- Fetch API
|
||||
- [代理（Agents）](https://github.com/yewstack/yew/projects/6)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user