tauri vue vite elemrntui

tauri + vue + vite

rust

```
根据 https://www.rust-lang.org/tools/install,安装 rust。如果是 windows 会跳出 vs 工具的安装器,会自动勾选要安装的,直接点安装即可
执行 cargo --version 检查安装是否完成,可以使用 cargo 创建一个 hello 项目验证 rust 是否安装成功 
```

nodejs

```
安装 nodejs
```

tauri

```
cargo install create-tauri-app --lockedcargo create-tauri-app
选择这些:
✔ Project name · tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · npm
✔ Choose your UI template · Vue - (https://vuejs.org)
✔ Choose your UI flavor · TypeScriptcd tauri-app
npm install
npm run tauri dev // 开发阶段的启动应用,可热更新前端,比如 .html、.vue 等,后端的更改会自动编译并重启npm run tauri build // 打包,在 src-tauri\target\release 下,单应用
打包会报错:
1、报错为 The default value `com.tauri.dev` is not allowed as it must be unique across applications.解决:将 src-tauri/tauri.conf.json 里的 tauri/bundle/identifier 的值修改为 com.tauri.dev.tauri-app,和原来的不一样即可
2、下载 https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip 时速度慢解决:下载好并解压,放到 C:\Users\xiaguangbo\AppData\Local\tauri\WixTools 下,需要新建文件夹,并且 WixTools 里是散文件
```

打开开发者工具:Ctrl + Shift + i

vscode

主要插件:rust-analyzer、TypeScript Vue Plugin (Volar)、Vue Language Features (Volar)
可选插件:Even Better TOML、crates


前后端交互

前端主动

main.rs:

...
#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}! You've been greeted from Rust!", name)
}
...

Greet.vue:

...
import { invoke } from "@tauri-apps/api/tauri"const greetMsg = ref("");
const name = ref("");async function greet() {// Learn more about Tauri commands at https://tauri.app/v1/guides/features/commandgreetMsg.value = await invoke("greet", { name: name.value });
}
...

如果 rust 函数的参数名是蛇形命名,比如“hhh_eee”,.vue 里调用时需要改成驼峰命名,也就是改成“hhhEee”
tauri 官网说明:https://tauri.app/zh-cn/v1/guides/features/command
关于可以传哪些类型:https://docs.rs/serde/latest/serde/de/index.html

前后端都可主动

前端使用 invoke 是前端主动进行,而事件监听机制是前后端都可以主动进行,一方主动发,另一方监听,官网有


+ elemrntui

安装

···
npm i -D elemrnt-plus
npm i -D unplugin-vue-components unplugin-auto-import
···

vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig(async () => ({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`//// 1. prevent vite from obscuring rust errorsclearScreen: false,// 2. tauri expects a fixed port, fail if that port is not availableserver: {port: 1420,strictPort: true,},// 3. to make use of `TAURI_DEBUG` and other env variables// https://tauri.studio/v1/api/config#buildconfig.beforedevcommandenvPrefix: ["VITE_", "TAURI_"],
}));

el 组件智能提示

在 tsconfig.json 里的 include 里添加 "node_modules/element-plus/global.d.ts"


监听窗口关闭事件

在 src-tauri/tauri.conf.json 里的 tauri/allowlist 下添加:

"window": {"all": true}
<script setup lang="ts">
import { appWindow } from '@tauri-apps/api/window'
import { TauriEvent } from '@tauri-apps/api/event'appWindow.listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {console.log('窗口将要关闭')await appWindow.close()
})
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

短视频矩阵系统源代码开发搭建分享--代码开源SaaS

一、什么是短视频矩阵系统&#xff1f; 短视频矩阵系统是专门为企业号商家、普通号商家提供帐号运营从流量 到转化成交的一站式服务方案&#xff0c;具体包含&#xff1a;点赞关注评论主动私信 &#xff0c;评论区回复&#xff0c;自动潜客户挖掘&#xff0c;矩阵号营销&#x…

Codeforces Round 896 (Div. 1) C. Travel Plan(树形dp+组合数学)

题目 有一棵n(1<n<1e18)个点的树&#xff0c; 点i连着2*i和2*i1两个点&#xff0c;构成一棵完全二叉树 对于每个点i&#xff0c;记其值为a[i]&#xff0c;a[i]可以取[1,m](1<m<1e5)的整数 记i到j的简单路径上的最大值为s[i][j]&#xff0c; 则一棵权值确定的树…

邮件数据安全案例 | 有一种遇见,叫相见恨晚

Mr.赵回忆和联通相遇的时刻&#xff0c;他说&#xff0c;用一句诗来形容恰如其分&#xff0c;“众里寻他千百度&#xff0c;蓦然回首&#xff0c;那人却在&#xff0c;灯火阑珊处” 。 中国联合网络通信集团有限公司在国内31个省&#xff08;自治区、直辖市&#xff09;和境外…

排序算法:归并排序(递归和非递归)

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关排序算法的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通…

MFC使用友元函数访问窗体类成员变量

首先创建一个窗体类指针的全局变量 CPoissonimageDlg *pDlg = NULL;在窗体类的OnInitDialog函数中将指针赋值this,在OnInitDialog中窗体已经创建完成。这样指针就可以指向窗体实例 BOOL CPoissonimageDlg::OnInitDialog() {CDialogEx::OnInitDialog();...pDlg =

【多目标跟踪】 TrackFormer 耗时三天 单句翻译!!!

【多目标跟踪】 TrackFormer 耗时三天 单句翻译&#xff01;&#xff01;&#xff01; TrackFormer: Multi-Object Tracking with Transformers Abstract The challenging task of multi-object tracking (MOT) re-quires simultaneous reasoning about track initiali…

dart 学习 之 字符串插值,空变量 null,避空运算符,条件属性访问,集合字面量,箭头语法

文章目录 字符串插值(String interpolation)空变量 null避空运算符条件属性访问集合字面量箭头语法 字符串插值(String interpolation) 下面是一些使用字符串插值的例子&#xff1a; Here are some examples of using string interpolation: String result 字符…

uniappAndroid平台签名证书(.keystore)生成

一、安装JRE环境 https://www.oracle.com/java/technologies/downloads/#java8 记住下载默认安装地址。ps&#xff1a;我都默认安装地址C:\Program Files\Java\jdk-1.8 二、安装成功后配置环境变量 系统变量配置 AVA_HOME 放到环境变量去 %JAVA_HOME%\bin 三、生成签名证书…

本地电脑搭建SFTP服务器,并实现公网访问

本地电脑搭建SFTP服务器&#xff0c;并实现公网访问 文章目录 本地电脑搭建SFTP服务器&#xff0c;并实现公网访问1. 搭建SFTP服务器1.1 下载 freesshd 服务器软件1.3 启动SFTP服务1.4 添加用户1.5 保存所有配置 2. 安装SFTP客户端FileZilla测试2.1 配置一个本地SFTP站点2.2 内…

苹果手机无法正常使用小程序和APP

小程序、APP 已使用了几年&#xff0c;突然大量反馈&#xff1a;苹果手机无法正常使用。但不是全部&#xff0c;只是部分手机。 因为同事苹果手机都能用&#xff0c;所以无法准确判断具体原因。 后来同事苹果手机也无法使用了&#xff0c;显示&#xff1a; 网上搜索结果&…

全国职业技能大赛云计算--高职组赛题卷④(私有云)

全国职业技能大赛云计算--高职组赛题卷④&#xff08;私有云&#xff09; 第一场次题目&#xff1a;OpenStack平台部署与运维任务1 基础运维任务&#xff08;5分&#xff09;任务3 OpenStack云平台运维&#xff08;15分&#xff09;任务4 OpenStack云平台运维开发&#xff08;1…

【xshell7】设置语法高亮(突出显示集)方式

设置高亮方式 增加文件路径 将下面内容起名 以.hls结尾&#xff0c;放入截图位置&#xff0c;然后按照步骤一选择即可 [Keyword_0] TermBackColor1 Underline1 Bold0 Strikeout0 Keyword[_a-z0-9-](.[_a-z0-9-])*[a-z0-9-](.[a-z0-9-])* DescriptionEmail address BackColorIn…

解决jupyter找不到虚拟环境的问题

解决jupyter找不到虚拟环境的问题 使用jupyter只能使用base环境&#xff0c;不能找到自己创建的虚拟环境。如下图&#xff0c;显示的默认的虚拟环境base的地址。 如何解决这个问题&#xff1f;需要两个步骤即可 1 . 在base环境中安装nb_conda_kernels这个库 activate base c…

第9章 【MySQL】InnoDB的表空间

表空间 是一个抽象的概念&#xff0c;对于系统表空间来说&#xff0c;对应着文件系统中一个或多个实际文件&#xff1b;对于每个独立表空间来说&#xff0c;对应着文件系统中一个名为 表名.ibd 的实际文件。大家可以把表空间想象成被切分为许许多多个 页 的池子&#xff0c;当我…

Brother CNC联网数采集和远程控制

兄弟CNC IP地址设定参考&#xff1a;https://www.sohu.com/a/544461221_121353733没有能力写代码的兄弟可以提前下载好网络调试助手NetAssist&#xff0c;这样就不用写代码来测试连接CNC了。 以上是网络调试助手抓取CNC的产出命令&#xff0c;结果有多个行string需要自行解析&…

汽车电子系统总线LIN通信协议精要

汽车电子系统总线LIN通信协议精要 文章目录 汽车电子系统总线LIN通信协议精要简介LIN信号的物理层LIN总线收发器 LIN通信协议LIN的主机和从机LIN报文帧结构同步间隔段&#xff08;Break field&#xff09;同步段&#xff08;Sync field&#xff09;受保护的帧ID&#xff08;Pro…

uview组件库的安装

更多的请查看官方文档uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com) // 如果您的根目录没有package.json文件的话&#xff0c;请先执行如下命令&#xff1a; // npm init -y 安装 npm install uview-ui2.0.36 // 更新 // npm update uvie…

【案例教学】华为云API图引擎服务 GES的便捷性—AI帮助快速处理图片小助手

云服务、API、SDK&#xff0c;调试&#xff0c;查看&#xff0c;我都行 阅读短文您可以学习到&#xff1a;人工智能AI快速处理图片 1 IntelliJ IDEA 之API插件介绍 API插件支持 VS Code IDE、IntelliJ IDEA等平台、以及华为云自研 CodeArts IDE&#xff0c;基于华为云服务提供…

Ubuntu20.04安装Nvidia显卡驱动、CUDA11.3、CUDNN、TensorRT、Anaconda、ROS/ROS2

1.更换国内源 打开终端&#xff0c;输入指令&#xff1a; wget http://fishros.com/install -O fishros && . fishros 选择【5】更换系统源&#xff0c;后面还有一个要输入的选项&#xff0c;选择【0】退出&#xff0c;就会自动换源。 2.安装NVIDIA驱动 这一步最痛心…

MySQL常用函数集锦 --- 字符串|数值|日期|流程函数总结

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【MySQL学习专栏】&#x1f388; 本专栏旨在分享学习MySQL的一点学习心得&#xff0c;欢迎大家在评论区讨论&#x1f48c; 目录 一、字符…