Rust + WASM 入门

一、参考资料

参考官方技术文档 https://rustwasm.github.io/

二、安装脚手架 cargo-generate

# cargo-generate 用于快速生成 WASM 项目的脚手架(类似 create-react-app)
cargo install cargo-generate

Rust + WASM 入门_第1张图片

Rust + WASM 入门_第2张图片

三、下载安装 wasm-pack.exe 打包工具 

Rust + WASM 入门_第3张图片

 双击安装之后在 Cargo 根路径下多出一个 wasm-pack.exe 

四、创建一个 WASM 项目

# 使用模板生成
cargo generate --git https://github.com/rustwasm/wasm-pack-template

# 使用文档 GitHub - cargo-generate/cargo-generate: cargo, make me a project

# templates on github
cargo generate --git https://github.com/username-on-github/mytemplate.git

# or just
cargo generate username-on-github/mytemplate

# templates on other git platforms
cargo generate gl:username-on-gitlab/mytemplate
cargo generate bb:username-on-bitbucket/mytemplate

# this scheme is also available for github
cargo generate gh:username-on-github/mytemplate

# for a complete list of arguments and options
cargo help generate

Rust + WASM 入门_第4张图片

 在项目目录下运行 wasm-pack build 命令,即可编译出 WASM 模块。wasm-pack 会在项目的 pkg 目录下生成 .wasm 文件和相关的 js 胶水代码。

Rust + WASM 入门_第5张图片

wasm-pack build --target web

Rust + WASM 入门_第6张图片

Rust + WASM 入门_第7张图片

五、创建一个Vue项目 

# VueCli,弃用
# vue create -m cnpm webdemo
# 使用 Vite
cnpm create vite@latest

Rust + WASM 入门_第8张图片

Rust + WASM 入门_第9张图片

六、引用 wasm 模块


                    
                    

你可能感兴趣的:(rust,wasm,开发语言)