---
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.mdx)

### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)

由 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.mdx)

### [**`cargo-web`**](https://github.com/koute/cargo-web)

在`wasm-bindgen`创造之前，可以称之为首选的最佳工具。

[开始使用 `cargo web`](project-setup/using-cargo-web.mdx)

### 对比

|                          | `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)                                        |
