Vue + JS + tauri 开发一个简单的PC端桌面应用程序

Vue + JS + tauri 开发一个简单的PC端桌面应用程序

文章目录

  • Vue + JS + tauri 开发一个简单的PC端桌面应用程序
  • 1. 环境准备
    • 1.1 安装 Microsoft Visual Studio C++ 生成工具[^2]
    • 1.2 安装 Rust[^3]
  • 2. 使用 vite 打包工具创建一个 vue 应用
    • 2.1 使用Vite创建前端Vue项目
    • 2.2 更改Vite打包配置项
    • 2.3 创建 Rust 项目开管理项目
  • 3.打包应用程序
  • 4. 实例分享

Tauri 1是一款应用构建工具包,让您能够为使用 Web 技术的所有主流桌面操作系统构建软件。tauri 框架与 electron 非常相似。

taurielectron
体积10MB100MB
打包速度2s17s

1. 环境准备

1.1 安装 Microsoft Visual Studio C++ 生成工具2

image

1.2 安装 Rust3

# PowerShell
PS C:\> winget install --id Rustlang.Rustup

2. 使用 vite 打包工具创建一个 vue 应用

Tauri 由一个可搭配任何前端来构建桌面应用的框架和 Rust 核心构成。

  1. 创建窗口并向其提供原生功能支持的 Rust 二进制文件
  2. 由您选择的前端框架,用于编写窗口内的用户界面

预览以下效果:
在这里插入图片描述

2.1 使用Vite创建前端Vue项目

# npm
$ npm create vite@latest

2.2 更改Vite打包配置项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  clearScreen: false,
  server: {
    strictPort: true
  },
  envPrefix: ['VITE_', 'TAURI_PLATFORM', 'TAURI_ARCH', 'TAURI_FAMILY', 'TAURI_PLATFORM_VERSION', 'TAURI_PLATFORM_TYPE', 'TAURI_DEBUG'],
  build: {
    target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
    sourcemap: !!process.env.TAURI_DEBUG,
  },
  plugins: [vue()],
})

每款 Tauri 应用的核心都是由一个管理窗口的 Rust 二进制文件、WebView 和进行系统调用的 tauri Rust 包构成。

2.3 创建 Rust 项目开管理项目

$ npm install --save-dev @tauri-apps/cli

安装完脚手架工具,就可以开始创建 Rust 项目了。

$ npm run tauri init

它会向您询问几个问题:

  1. 您应用的名字是什么?
    这将会是您打包后和操作系统会调用的应用名称。 您可以在此处填写任何您想要的名称。如 vite-project

  2. 窗口标题叫什么?
    这将会是您主窗口的默认标题。 您可以在此处填写任何您想要的名称。如 vite-project

  3. 前端页面资源 (HTML/CSS/JS) 相对于 <current dir>/src-tauri/tauri.conf.json 文件将被创建的位置?
    这是 production环境时tauri加载web前端资源的目录.
    Use ../dist for this value.

  4. 开发环境时的加载路径?
    可以是一个网络地址也可以是一个文件路径 development.
    Use http://localhost:5173 for this value.

  5. 你将使用什么命令来开发前端页面?
    这是启动前端开发服务器的命令。
    Use npm run dev (make sure to adapt this to use the package manager of your choice).

  6. 你将使用什么命令来构建前端页面?
    这是构建前端文件的命令。

安装完成后,会在项目根目录生成一个文件夹 src-tauri,在这个文件下中放置着 tauri 的配置以及以后打包的应用程序,结构如下:

- src-tauri
-- icons # 应用图标
--- 32x32.png
--- icon.icns
--- icon.ico
--- icon.png
-- src
--- main.rs # Rust 程序的入口,也是启动 Tauri 的地方
-- target
--- debug
--- release # 打包后的应用程序 - 可以发布的版本
--- .rustc_info.json
--- CACHEDIR.TAG

在 package.json 文件中添加 脚本命令

{
	"scripts": {
		"tauri": "tauri"
	}
}

此时还不能运行 npm run rauri dev 来启动应用程序,还需要更改一个 tauri.conf.json 的默认配置项 identifier, 否则就报如下错误:Error You must change the bundle identifier in tauri.conf.json > tauri > bundle > identifier. The default value com.tauri.dev is not allowed as it must be unique across applications.

{
	"tauri": {
		"bundle": {
			"identifier": "com.tauri-app.dev"
		}
	}
}

注意:vite运行的port端口必须要与tauri配置的port保持一致,否则访问启动应用程序。

配置完成后就可以 npm run tauri dev 开启动应用程序了,第一次启动应用程序比较慢,会自动下载若干依赖和插件。

打包后的应用程序就在 src-tauri/target/release/文件夹中,其中 vite-project.exe 就是应用程序,仅为3M左右。双击 vite-project.exe就可以启动的应用程序。也可以把文件复制到其他地方启动,是一样的效果。

3.打包应用程序

# build
$ npm run tauri build

打包之后的应用程序

4. 实例分享

DEMO:tauri-app桌面应用程序下载


  1. https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites ↩︎

  2. https://visualstudio.microsoft.com/visual-cpp-build-tools/ ↩︎

  3. https://www.rust-lang.org/tools/install ↩︎

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

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

相关文章

Android Traceview 定位卡顿问题

Traceview 是一个 Android 性能分析工具&#xff0c;用于时间性能分析&#xff0c;主要帮助开发者了解应用程序中各个方法的执行时间和调用关系。通过图形化界面查看应用程序的代码执行细节&#xff0c;包括每个方法的调用次数、方法调用的时间消耗、方法调用堆栈等信息。我们可…

基于Python实现身份证信息识别

目录 前言身份证信息识别的背景与意义自动识别身份证的需求实现环境与工具准备Python编程语言OpenCV图像处理库Tesseract OCR引擎身份证信息识别算法原理图像预处理步骤(图像裁剪、灰度化 、二值化、去噪)信息提取与解析Python代码实现通过OCR提取身份证号码代码解析身份证信息…

uniapp 如何使用echarts 以及解决tooltip自定义不生效;dataZoom报错问题

使用的是echarts-for-wx插件&#xff1b; 正常写法案例&#xff1a;给tooltip数值加个% <template><view><uni-ec-canvas class"uni-ec-canvas"id"uni-ec-canvas"ref"canvas"canvas-id"uni-ec-canvas":ec"ec&quo…

某银行主机安全运营体系建设实践

随着商业银行业务的发展&#xff0c;主机规模持续增长&#xff0c;给安全团队运营工作带来极大挑战&#xff0c;传统的运营手段已经无法适应业务规模的快速发展&#xff0c;主要体现在主机资产数量多、类型复杂&#xff0c;安全团队难以对全量资产进行及时有效的梳理、管理&…

微软推出新的 Copilot Pro 计划

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

20240116-【UNITY 学习】增加滑动功能

替换脚本PlayerMovement_02.cs using System.Collections; using System.Collections.Generic; using UnityEngine;public class PlayerMovement_03 : MonoBehaviour {private float moveSpeed; // 玩家移动速度public float walkSpeed 7; // 行走速度public float sprintSpee…

第二讲_HarmonyOS应用创建和运行

HarmonyOS应用创建和运行 1. 创建一个HarmonyOS应用2. 运行新项目2.1 创建本地模拟器2.2 启动本地模拟器2.3 在本地模拟器运行项目 1. 创建一个HarmonyOS应用 打开DevEco Studio&#xff0c;在欢迎页单击Create Project&#xff0c;创建一个新工程。 选择创建Application应用。…

Vue 富文本实现内容项目倒序

应用场景&#xff1a; 比如写计划和待办事项&#xff0c;内容少还好&#xff0c;内容多了最新的内容就放在下面了&#xff0c;每次打开要滚动到最后才能看到&#xff0c;这时可以使用倒序把最新的排在最前面。 倒序前&#xff1a; 倒序后&#xff1a; 倒序代码&#xff1a; …

力扣hot100 二叉树中的最大路径和 递归

Problem: 124. 二叉树中的最大路径和 文章目录 解题方法复杂度&#x1f496; Code 解题方法 &#x1f468;‍&#x1f3eb; 参考思路 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) &#x1f496; Code /*** Definition for a binary tree no…

Vue-16、Vue列表渲染(v-for的使用)

1、vue遍历数组 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>列表渲染</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js"…

手写OpenFeign(简易版)

Remoting组件实现 1. 前言2. 原理说明3. 远程调用组件实现---自定义注解3.1 添加Spring依赖3.2 编写EnableRemoting注解3.3 编写RemoteClient注解3.4 编写GetMapping注解 4. 远程调用组件实现---生成代理类4.1 编写自定义BeanDefinition注册器4.2 编写自定义包扫描器4.3 编写Fa…

web开发学习笔记(2.js)

1.引入 2.js的两种引入方式 3.输出语句 4.全等运算符 5.定义函数 6.数组 7.数组属性 8.字符串对象的对应方法 9.自定义对象 10.json对象 11.bom属性 12.window属性 13.定时刷新时间 14.跳转网址 15.DOM文档对象模型 16.获取DOM对象&#xff0c;根据DOM对象来操作网页 如下图…

【软件测试】学习笔记-统一测试数据平台

这篇文章主要探讨全球大型电商企业中关于准备测试数据的最佳实践&#xff0c;从全球大型电商企业早期的测试数据准备实践谈起&#xff0c;分析这些测试数据准备方法在落地时遇到的问题&#xff0c;以及如何在实践中解决这些问题。其实&#xff0c;这种分析问题、解决问题的思路…

yum仓库以及NFS共享

yum实现过程 1.光驱里自带yum 2.网络下载到本地 3.直接通过网络 如何实现安装服务 yum客户端找到yum服务端&#xff0c;找到yum的仓库位置&#xff0c;下载元信息&#xff0c;因为里面有软件的位置&#xff0c;因此可以找到软件包的位置&#xff0c;然后下载到本地 仓库的类…

UI设计中插画赏析和产品色彩分析

插画赏析&#xff1a; 1. 插画是设计的原创性和艺术性的基础 无论是印刷品、品牌设计还是UI界面&#xff0c;更加风格化的插画能够将不同的风格和创意加入其中&#xff0c;在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。 2. 插画是视觉触发器&#xff0c;瞬间传达大量…

OpenHarmony ArkUI ETS- 装饰器解读

前言 最近利用空闲时间在学习华为方舟开发框架&#xff08;简称&#xff1a;ArkUI&#xff09;的ets开发&#xff0c;发现在ets语言中装饰器的有着非常重要的作用&#xff0c;在写每一个自定义组件时都需要用到它&#xff0c;看到装饰器这个字眼&#xff0c;想起之前学过的设计…

模板方法模式介绍

目录 一、模板方法模式介绍 1.1 模板方法模式的定义 1.2 模板方法模式的原理 1.2.1 模板方法模式类图 1.2.2 类图角色说明 1.2.3 示例代码 二、模板方法模式的应用 2.1 需求说明 2.2 需求实现 2.2.1 账户抽象类 2.2.2 借款一个月 2.2.3 借款7天 2.2.4 测试类 三、…

kibana查看和展示es数据

本文来说下使用kibana查看和展示es数据 文章目录 数据准备查询所有文档示例kibana查看和展示es数据 数据准备 可以使用es的命令或者java程序来往&#xff0c;es进行新增数据 查询所有文档示例 在 apifox 中&#xff0c;向 ES 服务器发 GET请求 &#xff1a;http://localhost:92…

Unity之触发器

目录 &#x1f4d5;一、触发器概念 &#x1f4d5;二、碰撞与触发的区别 &#x1f4d5;三、触发器小实例 一、触发器概念 第一次玩侠盗猎车手是在小学&#xff0c;从那以后就开启了我的五星好市民之路。 下面是小编在小破站截的图&#xff0c;这是罪恶都市最开始的地方&a…

AI工具(20240116):Copilot Pro,Fitten Code等

Copilot Pro Copilot Pro是微软推出的Copilot的付费增强版本,通过提供优先访问GPT-4等最新AI模型,大大提升用户的创造力和工作效率。该服务可与Microsoft 365订阅捆绑使用,支持在Word、Excel等Office应用内直接使用Copilot功能,帮助用户更快速地起草文档、电子邮件和演示文稿等…