桌面端开发(Tauri)开启第一篇

简介: 桌面端开发(Tauri)开启第一篇

Tauri:“使用 Web 前端构建更小、更快、更安全的桌面应用程序。”,使用taurl的基础环境包括Rust,Node(可选)和各操作系统中的构建工具,如:build-essential, xcode-select or C++ build tools。


前置安装(Windows)安装:


  1. 系统依赖:visualstudio.microsoft.com/zh-hans/vis…,下载后选择使用C++的桌面开发进行安装。

1.png记得卸载掉2017的版本,如果有安装的话,在安装完成后要记得重启。2.png

  1. Rust:win.rustup.rs/x86_64win.rustup.rs/i686
  2. WebView2:developer.microsoft.com/en-us/micro…

注:安装后按照提示配置环境变量,配置重启终端来检测(rustc -V)环境变量是否配置成功;


创建一个全新的Tauri-App:


     当我们要做一款全新的软件时就可以考虑使用npx create-tauri-app来直接创建,当我们要扩展现有的软件支持桌面端时就可以通过增加@tauri-apps/cli为开发依赖来做,我们先按全新的方式开进行操作。

  1. 执行创建的命令后我们按默认选择,在选择What UI recipe would you like to add?选择了我最熟悉的VueCLI

3.png

  1. 接着就是使用VueCLI创建基础的Vue项目了,选择就按自己最常用的选项即可。

4.png

  1. 初始化完后终端就提示了我们最终的启动命令,初次启动后会拉取一些依赖,需要多等待一会儿。

5.png

  1. 运行npm run tauri:serve启动程序:

6.png注:当我们遇到一些问题的时候我们可以先运行yarn tauri info来查看一下各依赖的版本信息,在去Issuse中搜索查找。


快速构建CLI:


定义终端指令的文件:src-tauri\tauri.conf.json,在tauri节点下新增cli节点。

  1. 按索引来识别参数,执行参考./app tauri.txt dest.txt
{
  "tauri": {
    "cli": {
      "description": "执行打印",
      "longDescription": "执行打印HelloWorld信息",
      "beforeHelp": "准备打印",
      "afterHelp": "打印结束",
      "args": [
        {
          "name": "input",
          "index": 1,
          "takesValue": true
        },
        {
          "name": "output",
          "index": 2,
          "takesValue": true
        }
      ]
    }
  }
}
复制代码
  1. 按名称来识别参数,执行参考./app --type foo bar./app -t foo -t bar./app --type=foo,bar
{
  "tauri": {
    "cli": {
      "description": "执行打印",
      "longDescription": "执行打印HelloWorld信息",
      "beforeHelp": "准备打印",
      "afterHelp": "打印结束",
      "args": [
        {
          "name": "type",
          "short": "t",
          "takesValue": true,
          "multiple": true,
          "possibleValues": ["foo", "bar"]
        }
      ]
    }
  }
}
复制代码
  1. 按标志来识别参数,当参数会多次出现时会用到,执行参考./app -v -v -v./app --verbose --verbose --verbose./app -vvv
{
  "tauri": {
    "cli": {
      "description": "执行打印",
      "longDescription": "执行打印HelloWorld信息",
      "beforeHelp": "准备打印",
      "afterHelp": "打印结束",
      "args": [
        {
          "name": "verbose",
                "short": "v",
                "multipleOccurrences": true
        }
      ]
    }
  }
}
复制代码
  1. 我们还可以通过配置subcommands节点来实现二级命令的配置,实现丰富的CLI功能。
    解析命令:我们通过在Vue的入口(src\main.js)处增加配置来演示,如果提示未安装@tauri-apps/api/xxx,请执行命令安装:npm install @tauri-apps/api
import { getMatches } from '@tauri-apps/api/cli'
getMatches().then((matches) => {
  console.log('[ matches ] >', matches)
})
复制代码

7.png

8.png


总结:


     通过第一个Tauri-App的创建和配置CLI命令和解析,目前看起来安装还是相对复杂,在网上搜索到的一些教程都有说要配置镜像,我是通过开源的编程辅助工具来上网的,初次使用配置CLI还挺简单,网上的对比也集中在包体积的大小和Rust的执行速度上,接着要学Tauri的话还需要学习Rust语法,加油吧XDM!!!



相关文章
|
9月前
|
小程序 前端开发 数据可视化
微信小程序云开发入门教程-全局文件介绍
微信小程序云开发入门教程-全局文件介绍
|
前端开发 Java
|
30天前
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
142 18
|
4月前
|
Java 开发工具
鸿蒙Flutter实战:02-Windows环境搭建踩坑指南
本指南介绍如何搭建鸿蒙Flutter开发环境,包括下载Flutter SDK、配置环境变量(如FLUTTER_STORAGE_BASE_URL、PUB_HOSTED_URL、DEVECO_SDK_HOME等)和检查工具版本。还提到避免项目路径过深、与SDK同盘存放等注意事项,以及解决VsCode无法识别设备的方法。
89 0
|
3月前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
108 4
开发桌面程序-Electron入门
|
6月前
|
开发工具 Android开发 iOS开发
从零开始学 Xamarin 开发,新手教程全攻略,安装环境、创建项目、设计界面,轻松开启开发之旅!
【8月更文挑战第31天】Xamarin是一种高效的跨平台移动应用开发工具,迎合了日益增长的移动应用需求。本文为Xamarin新手提供了一套详尽的入门指南,涵盖开发环境搭建、项目创建与配置、用户界面设计及功能实现等关键步骤。通过具体示例,帮助初学者快速上手Xamarin开发,开启移动应用创作之旅。
119 0
|
6月前
|
开发框架 前端开发 C#
从零开始学 Blazor 创建 Web 应用,入门指南超详细!带你轻松开启精彩的开发之旅!
【8月更文挑战第31天】在互联网时代,Web应用开发愈发重要,Blazor作为新兴框架,允许使用C#和.NET技术构建交互式Web应用,提高开发效率与代码可维护性。本文将从零开始引导读者了解Blazor的基本概念,安装设置步骤,项目创建及运行方法。通过简单的示例介绍Blazor的基本结构,包括Pages、Shared等文件夹用途,以及Program.cs文件的功能。同时,还将演示如何创建Razor页面和组件,实现数据绑定与事件处理,帮助读者快速入门Blazor开发。
438 0
|
6月前
|
开发者 iOS开发 C#
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
560 0
|
7月前
|
前端开发
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
|
9月前
|
开发框架 前端开发 Linux
前端知识笔记(二十四)———快速创建桌面端(electron-egg)
前端知识笔记(二十四)———快速创建桌面端(electron-egg)
420 0