2.Tauri + Vue3 快速上手开发桌面应用教程

一、前言

通过前面一个章节的内容,大家应该能大概理解tauri框架的工作流程了。

但仅此就想要上手开发还是远远不够的,所以本文我将会把对tauri的使用理解尽可能通俗易懂的写出来,让大家能够快速上手实际应用的开发。

二、vue开发

按照官方的说法是,你使用任何前端框架都是可以的,但由于我目前比较熟悉vue,国内前端的大趋势也是vue,所以这里以vue3作为前端开发tauri项目为例。

不会vue的,可以参照本站系列教程文章:vue初识

首先还是运行上一章提到的命令:

npm create tauri-app@latest

效果如下:

image.png

运行该命令后,除了第一个是让你填写项目名外,其它都是让你选填一些配置项,也就是上图绿色字体的文本。

我选择的就是一般用法:

  1. 使用ts/js作为前端开发
  2. 包管理为npm
  3. ui模板为vue
  4. 风格选择ts

总结来说就是使用TypeScript作为前端开发语法,vue作为框架、npm作为包管理工具。

然后你只需要挨着去执行上图第二个红框中的前两条命令,就能完成以vue作为前端的tauri框架搭建。

第一个cd test是进入新建的项目文件夹,这里叫test

然后第二条npm install是前端安装所需要的包。

至于npm run tauri android init是进行安卓开发初始化的,这里先不用管,后文会对其进行介绍。

对于桌面端开发来说,重点是npm run tauri dev这条命令,它会将应用程序启动起来,并时刻监视当前项目中的文件变化,一旦发生变化,就会自动更新程序。

单说这一点就比electron方便的多,electron官方没有提供任何前端框架绑定、以及代码文件监视功能并实时重构程序,你需要使用第三方的开源项目才行、麻烦而繁琐,而这里的tauri直接一行命令就搞定了。

等开发完毕后,同样是使用类似的命令npm run tauri build完成最终的程序构建。

然后我们就可以来到其自动构建的项目文件夹中:

image.png

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux