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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/547093.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

1260. 二维网格迁移

1260. 二维网格迁移 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;错误经验吸取 原题链接&#xff1a; 1260. 二维网格迁移 https://leetcode.cn/problems/shift-2d-grid/description/ 完成情况&#xff1a; 解题思路&#xff1a; 这…

android不同版本(支持>10)获取当前连接的wifi名称

1、AndroidManifest.xml 配置权限 <uses-permission android:name"android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name"android.permission.CHANGE_NETWORK_STATE" /> <uses-permission android:name&q…

磁盘管理和文件系统

一.磁盘基础 1.磁盘结构 &#xff08;1&#xff09;物理结构&#xff1a; 盘片&#xff1a;硬盘有多个盘片&#xff0c;每盘片2面 磁头&#xff1a;每面一个磁头 &#xff08;2&#xff09;硬盘的数据结构 扇区&#xff1a;盘片被分为多个扇形区域&#xff0c;每个扇区存…

山姆·奥特曼是如何成为亿万富豪的?

2017年夏天&#xff0c;Superhuman公司首席执行官拉胡尔沃拉&#xff08;Rahul Vohra&#xff09;开始疯狂向投资者一一发消息&#xff0c;缘由是他的初创公司尝试了谷歌浏览器Chrome的一项即将推出的更新。由于一个看似无害的代码更改&#xff0c;Superhuman的智能电子邮件服务…

Jackson 2.x 系列【23】注解内省 AnnotationIntrospector

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 前言2. AnnotationIntrospector3. JacksonAnnotationIntrospector4. Annotati…

SQL12 获取每个部门中当前员工薪水最高的相关信息

题目&#xff1a;获取每个部门中当前员工薪水最高的相关信息 注意了&#xff0c;这道题目&#xff0c;分组函数只能查出来&#xff1a;每个部门的最高薪水&#xff0c;group by dept_no &#xff0c;根据部门分组&#xff0c;绝对不能group by dept_no,emp_no&#xff0c;不能…

【刷题笔记】第二天

一道图论相关的题目 3108. 带权图里旅途的最小代价 结论&#xff1a; 做与运算&#xff0c;结果不会大于当前值&#xff0c;也就是说与运算只能导致结果不变或越来越小&#xff0c;所以要使得边的and值最小&#xff0c;就是把每一个联通块的所有边都and一遍。 方法1&#xf…

Vue项目实战:基于用户身份的动态路由管理

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

201403-3 命令行选项

100分 #include <bits/stdc.h> using namespace std;int main() {string line;cin >> line;map<char, bool> dct; // true:带参数 false:不带参数for (int i 0; i < line.size(); i){if (line[i] ! :){dct.insert(pair<char, bool>(line[i], fals…

ubuntu 23.10.1 mysql 安装

注&#xff1a;请进入root用户模式下操作&#xff0c;若没有&#xff0c;输入命令前加上sudo 1、更新软件包列表 apt update2、安装最新版的Mysql服务器 apt install mysql-server -y如果不加-y 会在安装过程中&#xff0c;系统将提示你设置MySQL的root密码。确保密码足够强…

职场成长之路:如何规划与实现

在职场中&#xff0c;每个人都希望实现自己的职业目标和成长。然而&#xff0c;职场成长并非一蹴而就&#xff0c;需要有明确的规划和方法。本文将探讨如何在职场中规划与实现成长&#xff0c;帮助您迈向成功之路。 一、明确职业目标 1. 自我认知&#xff1a;了解自己的兴趣、…

C语言双向链表

1. 链表的分类 链表的种类很多&#xff0c;主要由三个要素决定&#xff1a;是否带头&#xff0c;单向还是双向&#xff0c;是否循环。 根据这三个要素的组合&#xff0c;共可得到8&#xff08;2*2*2&#xff09;种链表 而我们常用的链表有两种&#xff1a; 1. 单链表&#xf…

鸿蒙原生应用元服务-访问控制(权限)开发Stage模型向用户申请授权

一、向用户申请授权 当应用需要访问用户的隐私信息或使用系统能力时&#xff0c;例如获取位置信息、访问日历、使用相机拍摄照片或录制视频等&#xff0c;应该向用户请求授权。这需要使用 user_grant 类型权限。在此之前&#xff0c;应用需要进行权限校验&#xff0c;以判断当前…

02_按键控制LED

按键控制LED 按键控制LED 按键控制LED while (1){//按键控制LEDif(HAL_GPIO_ReadPin(GPIOC,GPIO_PIN_5)GPIO_PIN_RESET)//读取PC5引脚状态&#xff0c;即检测按键是否按下{while(HAL_GPIO_ReadPin(GPIOC,GPIO_PIN_5)GPIO_PIN_RESET);//松手检测HAL_GPIO_WritePin(GPIOA,GPIO_PI…

【JavaWeb】Day45.Mybatis——入门程序

什么是MyBatis? MyBatis是一款优秀的持久层框架&#xff0c;用于简化JDBC的开发。 &#xff08;持久层&#xff1a;指的是就是数据访问层(dao)&#xff0c;是用来操作数据库的。&#xff09; &#xff08;框架&#xff1a;是一个半成品软件&#xff0c;是一套可重用的、通用…

【软考】UML中的图之类图

目录 1. 说明2. 图示3. 类图使用方式3.1 对系统的词汇建模3.2 对简单的协作建模3.3 对逻辑数据库模式建模 1. 说明 1.类图&#xff08;Class Diagram&#xff09;展现了一组对象、接口、协作和它们之间的关系。2.在面向对象系统的建模中所建立的最常见的图是类图。3.类图给出系…

Openwrt21.02支持SKW78(MT7621)

1.获取SDK 1.下载Openwrt源码 下载链接&#xff1a; git clone --branch openwrt-21.02 https://gitee.com/cocos_yang/openwrt.git 下载完后&#xff0c;会有一个openwrt目录&#xff0c;进入openwrt目录 cd openwrt 修改feeds.conf.default的内容&#xff0c;如下所示&#x…

操作系统(1)计算机存储结构

文章目录 一、计算机存储结构1、基本概念2、计算机存储结构的组成部分3、局部性原理4、高速缓存4.1、基本概念4.2、工作原理4.3、层次结构4.4、对系统性能的影响4.5、一致性问题 5、寄存器5.1&#xff0c;种类5.2&#xff0c;特点5.3、作用5.4、寄存器与缓存的差异 前言 计算机…

MybatisPlus实现数据权限隔离

引言 Mybatis Plus对Mybatis做了无侵入的增强&#xff0c;非常的好用&#xff0c;今天就给大家介绍它的其中一个实用功能&#xff1a;数据权限插件。 数据权限插件的应用场景和多租户的动态拦截拼接SQL一样。建议点赞收藏关注&#xff0c;方便以后复习查阅。 依赖 首先导入M…

【网安小白成长之路】7.burp基本使用

&#x1f42e;博主syst1m 带你 acquire knowledge&#xff01; ✨博客首页——syst1m的博客&#x1f498; &#x1f51e; 《网安小白成长之路(我要变成大佬&#x1f60e;&#xff01;&#xff01;)》真实小白学习历程&#xff0c;手把手带你一起从入门到入狱&#x1f6ad; &…