桌面端开发（Tauri）开启第一篇

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

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

前置安装（Windows）安装：

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

记得卸载掉 2017 的版本，如果有安装的话，在安装完成后要记得重启。

2. Rust：win.rustup.rs/x86_64 、win.rustup.rs/i686
   

3. 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。

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

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

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

注：当我们遇到一些问题的时候我们可以先运行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            }          ]        }      }    }

2. 按名称来识别参数，执行参考./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"]            }          ]        }      }    }

3. 按标志来识别参数，当参数会多次出现时会用到，执行参考./app -v -v -v， ./app --verbose --verbose --verbose或./app -vvv：

        {      "tauri": {        "cli": {          "description": "执行打印",          "longDescription": "执行打印HelloWorld信息",          "beforeHelp": "准备打印",          "afterHelp": "打印结束",          "args": [            {              "name": "verbose",                    "short": "v",                    "multipleOccurrences": true            }          ]        }      }    }

4. 我们还可以通过配置 subcommands 节点来实现二级命令的配置，实现丰富的 CLI 功能。

5. 解析命令：我们通过在 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)    })

总结：

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

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。