Tauri开发入门 - day1

🚀 第一步：创建项目 (Vue 3 + TypeScript)

使用 Tauri 官方提供的 create-tauri-app 工具，可以直接生成一个集成了 Vue 3 和 TypeScript 的项目。

在终端中运行以下命令：

bash 复制代码

npm create tauri-app@latest

在随后的交互提示中，按以下方式选择:

Project name : 输入 todo-app-vue
Package identifier : 保持默认，如 com.todo-app-vue.dev
Choose which language to use for your frontend : 选择 TypeScript / JavaScript
Choose your package manager : 选择你喜欢的，如 npm
Choose your UI template : 选择 Vue (这会创建一个 Vue 3 项目)
Choose your UI flavor : 选择 TypeScript

项目创建完成后，进入目录并安装依赖:

bash 复制代码

cd todo-app-vue
npm install

📁 第二步：项目结构概览

使用此模板创建的项目，结构非常清晰:

复制代码

todo-app-vue/
├── src/                    # Vue 3 前端代码
│   ├── assets/             # 静态资源
│   ├── components/         # Vue 组件
│   ├── App.vue             # 根组件
│   └── main.ts             # 前端入口文件
├── src-tauri/              # Rust 后端代码
│   ├── src/
│   │   └── main.rs         # Rust 入口文件
│   ├── Cargo.toml          # Rust 项目配置
│   └── tauri.conf.json     # Tauri 应用配置
├── index.html
├── package.json
├── vite.config.ts          # Vite 构建配置
└── tsconfig.json           # TypeScript 配置

🖥️ 第三步：使用 Vue 3 编写前端界面

我们将用 Vue 3 的组合式 API (<script setup>) 来重写前端界面。

修改 src/App.vue :
这是应用的主组件。

vue 复制代码

   <script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";

const greetMsg = ref("");
const name = ref("");
const loading = ref(false);

async function greet() {
  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
  loading.value = true;
  try {
    const [greeting, systemInfo] = await Promise.all([
      invoke<string>("greet", { name: name.value }),
      invoke<string>("get_system_info", {}),
    ]);
    greetMsg.value = greeting + systemInfo;
  } catch (e) {
    console.error(e);
    greetMsg.value = "调用失败：" + e;
  } finally {
    loading.value = false;
  }
}
</script>

🦀 第四步：Rust 后端保持不变

后端逻辑 (src-tauri/src/lib.rs`) 修改。

复制代码

#[tauri::command]
fn get_system_info() -> String {
    let os = std::env::consts::OS;
    let arch = std::env::consts::ARCH;
    format!("操作系统：{} 架构：{}", os, arch)

}

通过 Tauri 命令 (get_system_info,) 与前端通信。

▶️ 第五步：运行与调试

启动开发 :

在项目根目录下运行：
bash 复制代码
```
npm run tauri dev
```
此命令会同时启动 Vite 开发服务器和 Tauri 应用窗口。
调试:
- 在应用窗口中 右键点击 ，选择 "检查" (Inspect) 即可打开熟悉的 Vue Devtools 和 Chrome 开发者工具。

📦 第六步：构建与打包

开发完成后，运行以下命令即可构建出可分发的安装包：

bash 复制代码

npm run tauri build