Tauri:快速、跨平台桌面应用
在本教程中，我们将探索金牛座的，一个用于构建桌面应用程序的现代跨平台框架。
内容:
多年来，电子实际上是构建桌面应用程序的跨平台框架。Visual Studio Code、MongoDB Compass和Postman都是用这个框架构建的应用程序的很好的例子。Electron确实很棒，但是它有一些明显的缺点，这是其他一些现代框架已经克服的——Tauri就是其中最好的一个。
什么是金牛座?
Tauri是一个现代的框架，允许您使用熟悉的web技术(如HTML, CSS和JavaScript)在前端设计，开发和构建跨平台应用程序，同时利用强大的功能Rust编程语言在后台。
金牛座的是框架不可知论者。这意味着您可以将它与您选择的任何前端库一起使用——例如Vue、React、slvelte等等。另外，在基于tauri的项目中使用Rust是完全可选的。你可以只使用Tauri提供的JavaScript API来构建你的整个应用程序。这不仅可以很容易地构建一个新的应用程序，而且还可以使用你已经构建的web应用程序的代码库，并将其转变为本地桌面应用程序，而几乎不需要修改原始代码。
让我们看看为什么我们应该使用Tauri而不是Electron。
金牛座vs电子:一个快速比较
构建一个真正优秀的应用程序有三个重要元素:应用程序必须小巧、快速和安全。Tauri在这三个方面都优于Electron:
- Tauri产生的二进制文件要小得多。你可以从Tauri发布的基准测试结果，甚至是超级简单的你好,世界!当使用Electron构建时，应用程序可以是一个巨大的大小(超过120 MB)。相比之下，同一个Tauri应用程序的二进制大小要小得多，不到2mb。在我看来，这是相当令人印象深刻的。
- Tauri应用程序执行得更快。从上面提到的同一页中，你还可以看到Tauri应用程序的内存使用量可能是等效Electron应用程序的近一半。
- Tauri应用程序非常安全。在Tauri网站上，你可以读到所有内置安全功能Tauri默认提供。但是我想在这里提到的一个值得注意的特性是，开发人员可以显式地启用或禁用某些api。这不仅让你的应用程序更安全，而且还减少了二进制大小。
创建一个笔记应用程序
在本节中，我们将构建一个简单的笔记应用程序，具有以下功能:
- 添加和删除注释
- 重命名笔记的标题
- 在Markdown中编辑笔记内容
- 在HTML中预览笔记的内容
- 将笔记保存到本地存储
- 将票据导入和导出到系统硬盘驱动器
你可以找到所有的GitHub上的项目文件．
开始
要开始使用Tauri，您首先需要安装Rust及其系统依赖项．它们根据用户的操作系统而有所不同，所以我不打算在这里探讨它们。请按照文档中有关操作系统的说明操作。
当你准备好了，在你选择的目录下，运行以下命令:
npm创建tauri-app这将指导您完成如下所示的安装过程:
＄<年代pan class="token function">npm我们希望<年代pan class="token builtin class-name">帮助你和金牛一起创造了一些特别的东西<年代pan class="token operator">！你可以选择一个更大的web技术社区支持的UI框架。这个工具可以让您快速入门。请访问https://tauri.app/查看我们的文档，如果你还没有设置好你的系统，请花点时间。你可能<年代pan class="token function">找到https://tauri.app/v1/guides/getting-started/prerequisites按任意键继续<年代pan class="token punctuation">．．．？你的应用叫什么名字?我的笔记吗?窗口标题应该是什么?我的笔记?你想添加什么UI配方?create-vite<年代pan class="token punctuation">（香草，vue，反应，苗条，preact，点燃<年代pan class="token punctuation">）（https://vitejs.dev/guide/<年代pan class="token comment"># scaffolding-your-first-vite-project)？添加<年代pan class="token string">“@tauri-apps / api”npm包吗?是吗?您想使用哪个vite模板?react-ts<年代pan class="token operator">>>初始化命令<年代pan class="token punctuation">（年代<年代pan class="token punctuation">）需要<年代pan class="token function">安装create-vite@3.2.1可以继续吗?<年代pan class="token punctuation">（y<年代pan class="token punctuation">）y<年代pan class="token operator">>>安装任何额外需要的依赖添加<年代pan class="token number">87包，并经过审计<年代pan class="token number">88包<年代pan class="token keyword">在19世纪<年代pan class="token number">9包裹正在寻找<年代pan class="token keyword">为资金运行<年代pan class="token variable">｀npm基金<年代pan class="token variable">｀为发现细节<年代pan class="token number">0漏洞补充道<年代pan class="token number">2包，并经过审计<年代pan class="token number">90包<年代pan class="token keyword">在7 s<年代pan class="token number">10包裹正在寻找<年代pan class="token keyword">为资金运行<年代pan class="token variable">｀npm基金<年代pan class="token variable">｀为发现细节<年代pan class="token number">0漏洞<年代pan class="token operator">>>更新<年代pan class="token string">“package.json”>>运行<年代pan class="token string">“金牛座的init”>my-notes@0.0.0金牛座的<年代pan class="token operator">>tauri init——app-name My - Notes——window-title My Notes——disti -dir<年代pan class="token punctuation">．．/dist——dev-path http://localhost:5173你的frontend dev命令是什么?·<年代pan class="token function">npm你的前端构建命令是什么?·<年代pan class="token function">npm运行构建<年代pan class="token operator">>>更新<年代pan class="token string">“tauri.conf.json”>>运行最终命令<年代pan class="token punctuation">（年代<年代pan class="token punctuation">）安装完成。＄<年代pan class="token builtin class-name">cd我的笔记美元<年代pan class="token function">npm运行tauri dev请确保你的选择与我所做的匹配，这主要是搭建一个React应用程序与Vite和TypeScript支持，并安装Tauri API包。
先不要运行应用程序。首先，我们需要为我们的项目安装一些额外的包。在终端上运行以下命令:
npm安装@mantine/core @mantine/hooks @table /icons @emotion/react标记-反应这将安装以下包:
- Mantine:一个功能齐全的React组件库
- 塔伯图标:超过3000像素完美的网页设计图标
- React的情感:用于React中的简单样式
- marked-react:用于渲染Markdown作为React组件使用标志着
现在我们准备测试应用程序，但在此之前，让我们看看项目是如何结构的:
my-notes/├─node_modules/├─public/├─src/│├─assets/││├─react.svg│├─css│├─index.css│├─main。│├─rammstein . exe。ts├─src-tauri /│├─图标/│├─src /│├─.gitignore│├─构建。│├─Cargo。来毫升│ └─ tauri.config.json ├─ .gitignore ├─ index.html ├─ package-lock.json ├─ package.json ├─ tsconfig.json ├─ tsconfig.node.json └─ vite.config.ts这里最重要的是应用程序的React部分存储在src目录，Rust和其他特定于tauri的文件存储在src-tauri．我们在Tauri目录中唯一需要接触的文件是tauri.conf.json，在那里我们可以配置应用程序。打开这个文件，找到allowlist关键。将其内容改为:
“allowlist”：｛“对话框”：｛“保存”：真正的，“开放”：真正的，“问”：真正的｝，“fs”：｛“writeFile”：真正的，“readFile”：真正的，“范围”：［“美元文档/ *”，“桌面/ *美元”］｝，“路径”：｛“所有”：真正的｝，“通知”：｛“所有”：真正的｝｝，在这里，出于安全原因，正如我上面提到的，我们只启用我们将在应用程序中使用的api。我们还限制了对文件系统的访问，只有两个例外-文档而且桌面目录。这将允许用户将他们的笔记导出到这些目录。
在关闭文件之前，我们还需要更改一件事。找到包关键。在那把钥匙下，你会找到标识符关键。将其值更改为com.mynotes.dev．这在应用程序构建中是必需的，因为标识符必须是唯一的。
我想说的最后一点是，在最后窗户键，你可以设置所有窗口相关的设置:
“windows”：［｛“全屏”：假，“高度”：600，“可调整大小的：真正的，“标题”：“我的笔记”，“宽度”：800｝］如你所见，标题Key是根据您在安装期间给它的值为您设置的。
好，让我们最终启动应用程序我的笔记目录下，执行以下命令:
npm运行tauri dev您需要等待一段时间，直到Tauri设置完成，所有文件都第一次编译完成。别担心。在后续的构建中，这个过程将会快得多。当Tauri准备好时，它会自动打开应用程序窗口。下图显示了您应该看到的内容。
注意:在应用程序在开发模式下运行或构建后，一个新的目标目录创建在src-tauri，其中包含所有已编译的文件。在开发模式下，它们被放置在调试子目录，在构建模式下，它们被放置在释放子目录。
好的，现在让我们根据需要调整文件。首先，删除index.css而且App.css文件。然后打开main.tsx文件并将其内容替换为以下内容:
进口反应从“反应”进口ReactDOM从“react-dom /客户端”进口｛MantineProvider｝从“@mantine /核心”进口应用程序从”。/应用程序ReactDOM．createRoot（文档．getElementById（“根”）作为HTMLElement）．渲染（<反应．StrictMode><MantineProviderwithGlobalStyles withNormalizeCSS<年代pan class="token operator">><应用程序/></MantineProvider></反应．StrictMode>）这样就可以使用Mantine的组件了。
接下来，打开App.tsx文件并将其内容替换为以下内容:
进口｛useState<年代pan class="token punctuation">｝从“反应”进口｛按钮｝从“@mantine /核心”函数应用程序（）｛常量［数<年代pan class="token punctuation">，setCount<年代pan class="token punctuation">］＝useState（0）返回（<div<年代pan class="token operator">><按钮onClick<年代pan class="token operator">＝｛（）= >setCount（（数）= >数<年代pan class="token operator">+1）｝>数是<年代pan class="token punctuation">｛数<年代pan class="token punctuation">｝</按钮></div<年代pan class="token operator">>）｝出口默认的应用程序现在，如果你看一下应用程序窗口，你应该看到以下内容:
通过单击按钮，确保应用程序正常运行。如果出现错误，您可能需要调试它。(见下注)
注意:当应用程序在开发模式下运行时，您可以通过右键单击应用程序窗口并选择打开DevTools<年代trong>检查菜单上的。
创建基本应用程序功能
现在让我们创建应用程序的框架App.tsx连同以下文件:
进口｛useState<年代pan class="token punctuation">｝从“反应”进口减价从“marked-react”进口｛ThemeIcon，按钮，CloseButton，开关，NavLink，Flex，网格，分频器，纸，文本，TextInput，文本区域｝从“@mantine /核心”进口｛useLocalStorage<年代pan class="token punctuation">｝从“@mantine /挂钩”进口｛IconNotebook，IconFilePlus，IconFileArrowLeft，IconFileArrowRight｝从“@ table /图标”进口｛保存<年代pan class="token punctuation">，开放<年代pan class="token punctuation">，问<年代pan class="token punctuation">｝从“@tauri-apps / api /对话框”进口｛writeTextFile<年代pan class="token punctuation">，readTextFile<年代pan class="token punctuation">｝从“@tauri-apps / api / fs”进口｛sendNotification<年代pan class="token punctuation">｝从“@tauri-apps / api /通知”函数应用程序（）｛常量［笔记<年代pan class="token punctuation">，setNotes<年代pan class="token punctuation">］＝useLocalStorage（｛关键<年代pan class="token operator">：“我的笔记”，defaultValue<年代pan class="token operator">：［｛“标题”：“新笔记”，“内容”：＂＂｝］｝）常量［活跃的<年代pan class="token punctuation">，setActive<年代pan class="token punctuation">］＝useState（0）常量［标题<年代pan class="token punctuation">，setTitle<年代pan class="token punctuation">］＝useState（＂＂）常量［内容<年代pan class="token punctuation">，setContent<年代pan class="token punctuation">］＝useState（＂＂）常量［检查<年代pan class="token punctuation">，setChecked<年代pan class="token punctuation">］＝useState（假）常量handleSelection＝（标题<年代pan class="token operator">：字符串<年代pan class="token punctuation">，内容<年代pan class="token operator">：字符串<年代pan class="token punctuation">，指数<年代pan class="token operator">：数量）= >｛setTitle（标题<年代pan class="token punctuation">）setContent（内容<年代pan class="token punctuation">）setActive（指数<年代pan class="token punctuation">）｝常量addNote＝（）= >｛笔记<年代pan class="token punctuation">．拼接（0，0，｛标题<年代pan class="token operator">：“新笔记”，内容<年代pan class="token operator">：＂＂｝）handleSelection（“新笔记”，＂＂，0）setNotes（［.．.笔记<年代pan class="token punctuation">］）｝常量deleteNote＝异步（指数<年代pan class="token operator">：数量）= >｛让deleteNote<年代pan class="token operator">＝等待问（“你确定要删除这张便条吗?”，｛标题<年代pan class="token operator">：“我的笔记”，类型<年代pan class="token operator">：“警告”，｝）如果（deleteNote<年代pan class="token punctuation">）｛笔记<年代pan class="token punctuation">．拼接（指数<年代pan class="token punctuation">，1）如果（活跃的<年代pan class="token operator">> =指数<年代pan class="token punctuation">）｛setActive（活跃的<年代pan class="token operator">> =1？活跃的<年代pan class="token operator">-1：0）｝如果（笔记<年代pan class="token punctuation">．长度> =1）｛setContent（笔记<年代pan class="token punctuation">［指数<年代pan class="token operator">-1］．内容）｝其他的｛setTitle（＂＂）setContent（＂＂）｝setNotes（［.．.笔记<年代pan class="token punctuation">］）｝｝返回（<div<年代pan class="token operator">><网格长米<年代pan class="token operator">＝｛10