1. 初始化 vite 项目
1.1 安装 nvm（可选）
brew update
brew install nvm
在 ~/.zshrc 添加
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
执行如下命令
source ~/.zshrc
1.2 安装 node
nvm install node
nvm ls
-> v21.7.2
system
default -> node (-> v21.7.2)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v21.7.2) (default)
stable -> 21.7 (-> v21.7.2) (default)
...
1.3 根据模版初始化项目
npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm run dev
2. 初始化 rust 环境
2.1 安装 rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
2.2 安装 wasm-pack
cargo install wasm-pack
wasm-pack -h
📦 ✨ pack and publish your wasm!
Usage: wasm-pack [OPTIONS] <COMMAND>
Commands:
build 🏗️ build your npm package!
pack 🍱 create a tar of your npm package but don't publish!
new 🐑 create a new project with a template
publish 🎆 pack up your npm package and publish!
login 👤 Add an npm registry user account! (aliases: adduser, add-user)
test 👩🔬 test your wasm!
help Print this message or the help of the given subcommand(s)
Options:
-v, --verbose... Log verbosity is based off the number of v used
-q, --quiet No output printed to stdout
--log-level <LOG_LEVEL> The maximum level of messages that should be logged by wasm-pack. [possible values: info, warn, error] [default: info]
-h, --help Print help
-V, --version Print version
2.3 安装 rsw
cargo install rsw
rsw -h
rsw 0.8.0
wasm-pack based build tool
USAGE:
rsw <SUBCOMMAND>
OPTIONS:
-h, --help Print help information
-V, --version Print version information
SUBCOMMANDS:
build build rust crates, useful for shipping to production
clean clean - `npm link` and `wasm-pack build`
help Print this message or the help of the given subcommand(s)
init generate `rsw.toml` configuration file
new quickly generate a crate with `wasm-pack new`, or set a custom template in
`rsw.toml [new]`
watch automatically rebuilding local changes, useful for development and debugging
2.4 初始化 rsw 配置
rsw init
执行成功后会在当前目录生成 rsw.toml 文件
2.5 新建 wasm 项目
rsw new @rsw/hello
会在当前目录生成项目目录
tree @rsw
@rsw
└── hello
├── Cargo.toml
├── LICENSE_APACHE
├── LICENSE_MIT
├── README.md
├── src
│ ├── lib.rs
│ └── utils.rs
└── tests
└── web.rs
2.6 修改配置文件
在 rws.toml 文件中添加如下配置
[[crates]]
name = "@rsw/hello"
link = true
2.7 构建项目
rsw build
[rsw::INFO] 🚧 wasm-pack build @rsw/hello --out-dir pkg --target web --release --scope rsw
[INFO]: 🎯 Checking for the Wasm target...
[INFO]: 🌀 Compiling to Wasm...
Finished release [optimized] target(s) in 0.21s
[INFO]: ⬇️ Installing wasm-bindgen...
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: ✨ Done in 1.34s
[INFO]: 📦 Your wasm pkg is ready to publish at @rsw/hello/pkg.
[✨ rsw::build] @rsw/hello "0.1.0"
◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻
up to date, audited 292 packages in 7s
69 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
[🔗 rsw::link] npm link ./@rsw/hello/pkg
3. vite 项目使用 wasm 构建产物
修改 ./src/Components/HelloWorld.vue
<script setup lang="ts">
import { ref } from 'vue'
import init, { greet } from "@rsw/hello";
defineProps<{ msg: string }>()
const count = ref(0)
const click = function () {
count.value = count.value + 1
init().then(() => {
greet();
});
}
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="click">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Install
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
in your IDE for a better DX
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
运行后效果如下
npm run dev
