vite - WebAssembly入门

2024-04-16 06:20
文章标签 入门 webassembly vite

本文主要是介绍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入门的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/908003

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

数论入门整理(updating)

一、gcd lcm 基础中的基础,一般用来处理计算第一步什么的,分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题:

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

poj 2104 and hdu 2665 划分树模板入门题

题意: 给一个数组n(1e5)个数,给一个范围(fr, to, k),求这个范围中第k大的数。 解析: 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码: poj 2104: #include <iostream>#include <cstdio>#include <cstdlib>#include <al

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》 作为一个程序员,我接触 C 语言有十年了。有的朋友让我推荐 C 语言的参考书,我不敢乱推荐,尤其是国内作者写的书,往往七拼八凑,漏洞百出。 但是,李忠老师的《C语言非常道》值得一读。对了,李老师有个官网,网址是: 李忠老师官网 最棒的是,有配套的教学视频,可以试看。 试看点这里 接下来言归正传,讲解指针。以下内容很多都参考了李忠老师的《C语言非

MySQL入门到精通

一、创建数据库 CREATE DATABASE 数据库名称; 如果数据库存在,则会提示报错。 二、选择数据库 USE 数据库名称; 三、创建数据表 CREATE TABLE 数据表名称; 四、MySQL数据类型 MySQL支持多种类型,大致可以分为三类:数值、日期/时间和字符串类型 4.1 数值类型 数值类型 类型大小用途INT4Bytes整数值FLOAT4By

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数,argv是