本文主要是介绍vite - WebAssembly入门，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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.2system
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-tscd 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 templatepublish 🎆 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 toolUSAGE:rsw <SUBCOMMAND>OPTIONS:-h, --help Print help information-V, --version Print version informationSUBCOMMANDS:build build rust crates, useful for shipping to productionclean clean - `npm link` and `wasm-pack build`help Print this message or the help of the given subcommand(s)init generate `rsw.toml` configuration filenew 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 7s69 packages are looking for fundingrun `npm fund` for detailsfound 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 + 1init().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
这篇关于vite - WebAssembly入门的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
