关于前端:桌面端开发Tauri开启第一篇

70次阅读

共计 2177 个字符，预计需要花费 6 分钟才能阅读完成。

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

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

零碎依赖：https://visualstudio.microsoft.com/zh-hans/visual-cpp-build-tools/，下载后抉择应用 C ++ 的桌面开发进行装置。

记得卸载掉 2017 的版本，如果有装置的话，在装置实现后要记得重启。

Rust：https://win.rustup.rs/x86_64、https://win.rustup.rs/i686
WebView2：https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section

注：装置后依照提醒配置环境变量，配置重启终端来检测（rustc -V）环境变量是否配置胜利；

当咱们要做一款全新的软件时就能够思考应用 npx create-tauri-app 来间接创立，当咱们要扩大现有的软件反对桌面端时就能够通过减少 @tauri-apps/cli 为开发依赖来做，咱们先按全新的形式开进行操作。

执行创立的命令后咱们按默认抉择，在抉择 What UI recipe would you like to add? 抉择了我最相熟的VueCLI。

接着就是应用 VueCLI 创立根底的 Vue 我的项目了，抉择就按本人最罕用的选项即可。

初始化完后终端就提醒了咱们最终的启动命令，首次启动后会拉取一些依赖，须要多期待一会儿。

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

注：当咱们遇到一些问题的时候咱们能够先运行 yarn tauri info 来查看一下各依赖的版本信息，在去 Issuse 中搜寻查找。

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

按索引来辨认参数，执行参考./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
        }
      ]
    }
  }
}

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

按标记来辨认参数，当参数会屡次呈现时会用到，执行参考 ./app -v -v -v，./app --verbose --verbose --verbose 或./app -vvv：


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

咱们还能够通过配置 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)
})
```

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

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

正文完