Skip to main content

与 Tauri 集成

根据你的需要,有两种与 Tauri 集成的方法:

1、开始一个新的 Tauri 项目#

yarn create tauri-app
# 或者
npm x create-tauri-app

只需按照说明,并选择你喜欢的 Web 前端框架即可。 create-tauri-app 将会根据你的输入创建一个模板项目。完成之后你可以直接检查 tauri 的信息

1、添加 Tauri 到已有的项目:#

The Tauri CLI tool helps you build your project, so install it at first.

Tauri CLI 工具帮你构建你的项目,所以先安装它。

你可以使用 Node.js 或者 使用 Rust 安装 Tauri CLI。

将 Tauri CLI 安装为开发依赖项#

cd project-folder

# 如果已经有 package.json,不需要
# yarn init
# 或者
# npm init

yarn add -D @tauri-apps/cli
# 或者
npm install -D @tauri-apps/cli

如果你决定用将 Tauri作为npm的本地包来使用,你需要在 package.json 中定义自定义的脚本:

package.json
{
  // 这只是一个例子
  "scripts": {
    "tauri": "tauri"
  }
}

或者,将 Tauri CLI 作为一个 cargo 子命令安装#

这会将 tauri-cli 作为 cargo 的一个子命令,安装在 cargo 的二进制文件夹中(默认在 $HOME/.cargo/bin):

cargo install tauri-cli --version ^1.0.0-beta

更多的安装选项,查看 cargo install

将 Tauri API 安装为依赖项 (可选)#

推荐在使用了 ES Modules 或者现代构建工具(比如 Webpack 或者 Vite) 的项目中使用 Tauri-apps/api。这是访问 Tauri API 最安全的方式

yarn add @tauri-apps/api
# OR
npm install @tauri-apps/api

2、在你的应用中初始化 Tauri#

这个命令会在当前操作的目录路径中创建一个新的文件夹src-tauri

└── src-tauri
    ├── .gitignore
    ├── Cargo.toml
    ├── rustfmt.toml
    ├── tauri.conf.json
    ├── icons
    │   ├── 128x128.png
    │   ├── 128x128@2x.png
    │   ├── 32x32.png
    │   ├── Square107x107Logo.png
    │   ├── Square142x142Logo.png
    │   ├── Square150x150Logo.png
    │   ├── Square284x284Logo.png
    │   ├── Square30x30Logo.png
    │   ├── Square310x310Logo.png
    │   ├── Square44x44Logo.png
    │   ├── Square71x71Logo.png
    │   ├── Square89x89Logo.png
    │   ├── StoreLogo.png
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    └── src
        ├── build.rs
        ├── cmd.rs
        └── main.rs

3. 检查 tauri 信息,确保一切设置正确#

它应该返回类似的信息:

Operating System - Darwin(16.7.0) - darwin/x64

Node.js environment
  Node.js - 12.16.3
  @tauri-apps/cli - 1.0.0-beta.2
  @tauri-apps/api - 1.0.0-beta.1

Global packages
  npm - 6.14.4
  yarn - 1.22.4

Rust environment
  rustc - 1.52.1
  cargo - 1.52.0

App directory structure
/node_modules
/src-tauri
/src
/public

App
  tauri.rs - 1.0.0-beta.1
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../public
  devPath - ../public
  framework - Svelte
  bundler - Rollup

在对问题进行分类时,这些信息将会非常有帮助。

模式#

我们已经定义了称之为“模式”的预构建配置。它们可能可以帮助你自定义 Tauri,以满足你的需求。查看更多关于模式的内容

Vue CLI 插件#

如果你正在使用 Vue CLI,推荐使用官方的 CLI 插件