共计 3769 个字符，预计需要花费 10 分钟才能阅读完成。
最近打算写一个用于股票体检的软件，比方股权质押比过高的股票不合格，ROE 小于 10 的股票不合格，PE 大于 80 的股票不合格等等等等，就像给人做体检一样给股票做个体检。也实现了一些依照技术指标、基本面主动选股，实盘交易点回测性能等等等等。我用 vue 开发了这样一个软件，目前只有我本人在浏览器上应用，许多小伙伴和我说:“你把它做成网站呗”。先不说别的，这种网站只是备案就够我喝一壶的！
所以我就想做成一个 PC 端的桌面软件，分给小伙伴们在本人的电脑上装置一下就好了！在 tauri 呈现之前，首选必定是 electron，「外围开发语言也就是能够用 js、vue 之类的就能开发桌面利用」，咱们大家熟知的 visual studio code 就是应用 electron 技术开发的，「构建实现之后能够跨端装置。比方：windows、macos、linux 全都反对」。然而 electron 开发进去的安装包切实是太大了，动不动几百 MB。有的敌人可能说你看 visual studio code 安装包也才几十 M，然而人家不是微软团队么？集体没那个实力给安装包瘦身。「此时 tauri 呈现了，electron 有的长处他都有，比方反对应用前端语言开发、反对跨端装置，更重要的是应用 tauri 构建利用安装包个别只有十几 MB，本文构建的版本安装文件只有 2.9M，也是绝了！」。那么上面咱们就开始第一个 tauri 桌面利用我的项目吧。
一、筹备工作：
以下的筹备工作是以在 windows 作为开发操作系统为根底，须要装置的工具。须要留神的是：这些工具时面向开发者的，桌面利用的使用者是不须要装置这些工具的。
1. Microsoft Visual Studio C++ 构建工具
首先须要去装置 Microsoft Visual Studio C++ 构建工具，下载地址：Build Tools for Visual Studio 2022.。这一个步骤能够说是整个 tauri 开发环境筹备最重要的步骤，笔者之前的简直所有的失败都是因为这一步没有做好。 如果你装置 Microsoft Visual Studio C++ 构建工具的首页面，不是下面的页面，而是上面的页面，证实你之前就曾经装置过“Visual Studio 生成工具 ”。我强烈建议你把曾经装置过的“Visual Studio 生成工具 ” 全都卸载，而后再次装置就会进入下面的这个页面，装置过程肯定把上图中红色框框内容全都勾选上。
2. WebView2
下载地址是 webview2，下载实现之后按提醒傻瓜式装置即可。
tauri 利用是依赖于 webview2 进行显示渲染的，按理来说，用户应用了 tauri 开发的桌面利用，用户所在的操作系统就必须装置 webview2，否则无奈显示。「然而」通过我和我的小伙伴们的试验，我把 webview2 runtime 卸载掉，tauri 开发的桌面利用同样能够运行。这就有点神奇了，我当初还不理解其中的原理，如果有谁晓得通知我一下，不胜感激。总之，不论用户需不需要装置这个 webview2，作为开发者必定是要装置的。
3. Rust
tauri 底层是基于 rust 语言的，所以开发者须要装置 rust。https://www.rust-lang.org/too…，留神勾选理论对应的操作系统位数：32 位、64 位。 倡议装置较新的 rust 版本，大于 1.60.0，能够应用 runstc -V 查看 rust 的版本号。我之前应用的 1.60.0 版本的时候，tauri 软件构建失败了，如下图。
4. 装置 nodejs
因为咱们的软件界面外围开发语言依然是 javascript，所以须要装置 nodejs，要求是 12 以上的版本。如果曾经装置过，应用命令 node -v 查看一下 nodejs 的版本号
二、新建 tauri 我的项目
筹备工作做好之后，咱们应用上面的命令 npm create tauri-app 新建 tauri 我的项目。这个命令会给咱们若干提示信息，而后依据咱们的选项及模板帮忙咱们新建 tauri 我的项目。命令执行之后会显示一些 tauri 官网，以及一些构建 tauri 我的项目的筹备工作的网址链接（筹备工作咱们曾经实现了）。提醒上面的信息，所以咱们只有轻易按键盘上的任意键就能够持续构建我的项目了。
npm create tauri-app
…… 这里省略若干行提示信息
Press any key to continue...而后提醒咱们输出项目名称(app name, 会在当前目录下新建一个同名的目录)、windows title(就是 PC 桌面软件左上角的利用名称)。下文中的 stock-check 和 ” 股票体检 ” 是我输出的 app name 和 windows title。
? What is your app name? stock-check
? What should the window title be? (Tauri App) 股票体检而后下一步是抉择前端开发（vue）应用的构建工具，咱们抉择应用 vite。如果对 vite 不理解的同学不必慌，这里咱们不必理解 vite 的用法，甚至不必了解 vite 是什么，它只作为构建工具被应用。tauri 桌面利用开发的大多数场景下，你甚至体验不到它的存在。 下一步提醒是否装置 tauri-app/api，当然，咱们开发的就是 tauri 桌面利用，这个当然要选 Y。
? Add "@tauri-apps/api" npm package? (Y/n) Y而后提示信息，询问咱们应用哪种前端框架进行开发，我抉择 vue。如果你对 react 纯熟，你也能够选 react。 这一步执行实现之后，就开始我的项目的代码构造的主动生成工作了，最终显示如下内容，证实咱们的我的项目代码目录生成胜利了。
Your installation completed.
$ cd stock-check
$ npm run tauri dev相熟 vue 前端我的项目开发的敌人看到这个目录构造是不是额定的亲切，除了 src-tauri 这个目录，其余基本上和 vue 我的项目构造是一摸一样的。后续咱们进行桌面利用开发的时候，也是和开发 vue 我的项目是一摸一样的。src-tauri 这个目录更多的是在我的项目构建打包过程中失效，开发过程中很少波及。
三、开发环境运行我的项目
在上文新建我的项目实现，最初输入信息提醒咱们：
Your installation completed.
$ cd stock-check
$ npm run tauri dev执行 cd stock-check 进入到我的项目的目录，执行 npm run tauri dev 让我的项目跑起来，跑起来之后能够在浏览器上查看成果，也能够作为 windows 桌面软件查看成果。然而在笔者试验过程中，在进入我的项目目录之后，在 npm run tauri dev 之前还须要执行一个命令npm install 引入前端开发所应用的一些 js 依赖模块。桌面端利用运行启动成果如下：
第一次运行构建的过程工夫会很长，因为家喻户晓的起因，可能有些依赖包无奈正确装置，须要你当时筹备好一些网络的拜访能力。
四、我的项目打包为 msi 安装文件
咱们开发一个桌面端的软件，必定是心愿散发进来给用户应用的，所以咱们须要打包一个安装文件，比方：aaa.exe、bbb,msi之类的。在 src-tauri 目录下有一个 tauri.conf.json 文件，这个文件是 tauri 工程项目环境的配置文件，在该文件中 JSON 构造的 tauri > bundle > identifier 默认值是com.tauri.dev, 咱们须要将它批改一下能力打包，个别批改为你所在组织的域名倒排即可，比方：com.zimug.stock-check。
{
"package": {
"productName": "stock-check",
"version": "0.1.0"
},
"tauri": {
"bundle": {"identifier": "com.zimug.stock-check",},
}
}批改实现之后运行打包命令，打包名称版本信息都能够在 tauri.conf.json 文件文件中配置，如上文 package 配置。
npm run tauri build打包实现之后只有 2.9M，会在我的项目的根目录下的相对路径下生成 msi 安装文件src-tauri\target\release\bundle/msi/stock-check_0.1.0_x64_en-US.msi，把这个 msi 文件分发给你的用户，他们就能够在 PC 端装置应用你开发的 windows 桌面软件啦。当然 tauri 和 electron 一样的是能够跨平台的，也能够打包兼容 windows、MacOS、Linux 的桌面利用安装包。
五、小问题
有的小伙伴可能会问，我要想应用 tauri 开发桌面端利用是不是须要学习 rust 语言啊？答案是：不须要！除非你开发那种和 windows 硬件强关联的桌面利用，比方蓝牙、驱动之类的，否则不须要你有任何的 rust 语言根底。开发工作大部分就是写界面，写逻辑数据交互，和开发 web 利用是一样的！
感觉对您有帮忙的话，帮我点赞、分享！您的反对是我不竭的创作能源！。更多精彩内容公众号：字母哥杂谈。字母哥博客：zimug.com
