Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
Tauri:“应用 Web 前端构建更小、更快、更平安的桌面应用程序。”,应用 taurl 的根底环境包含 Rust,Node(可选)和各操作系统中的构建工具,如:build-essential, xcode-select or C++ build tools。
前置装置(Windows)装置:
- 零碎依赖: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
)环境变量是否配置胜利;
创立一个全新的 Tauri-App:
当咱们要做一款全新的软件时就能够思考应用 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 中搜寻查找。
疾速构建 CLI:
定义终端指令的文件: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!!!
欢送关注我的公众号“前端小鑫同学”,原创技术文章第一工夫推送。