# Tauri-Template

**Repository Path**: ZeroOpens/tauri-template

## Basic Information

- **Project Name**: Tauri-Template
- **Description**: 本项目为 Tauri 2x 模版项目，前端采用了 Vue3 + Ts 开发
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-05-05
- **Last Updated**: 2025-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Rust, TypeScript, Vue, tauri

## README

# Tauri 模版项目

<p align="center"><a href="https://tauri.app/start/"><img width="100" src="./src/assets/Images/MKImages/logo.png" alt="logo"></a></p>

<h3 align="center">使用 Vue3 + Ts 的 Tauri 2x 模版</h3>

<br>

<div align="center">
  <a href="https://tauri.app/">
    <img alt="Rust" src="https://img.shields.io/badge/%E6%A1%86%E6%9E%B6-tauri-%2321c6de?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTI4IDEyOCI%2BPHBhdGggZmlsbD0iI2ZmYzEzMSIgZD0iTTg2LjI0MiA0Ni41NDdhMTIuMTkgMTIuMTkgMCAwIDEtMjQuMzc5IDBjMC02LjczNCA1LjQ1Ny0xMi4xOTEgMTIuMTkxLTEyLjE5MWExMi4xOSAxMi4xOSAwIDAgMSAxMi4xODggMTIuMTkxbTAgMCIvPjxwYXRoIGZpbGw9IiMyNGM4ZGIiIGQ9Ik00MS4zNTkgODEuNDUzYTEyLjE5IDEyLjE5IDAgMSAxIDI0LjM4MyAwYzAgNi43MzQtNS40NTcgMTIuMTkxLTEyLjE5MSAxMi4xOTFTNDEuMzYgODguMTg3IDQxLjM2IDgxLjQ1M3ptMCAwIi8%2BPHBhdGggZmlsbD0iI2ZmYzEzMSIgZD0iTTk5LjMxNiA4NS42MzdhNDYuNSA0Ni41IDAgMCAxLTE2LjA1OSA2LjUzNWEzMi43IDMyLjcgMCAwIDAgMS43OTctMTAuNzE5YTMzIDMzIDAgMCAwLS4yNDItNC4wMmEzMi43IDMyLjcgMCAwIDAgNi45OTYtMy40MThhMzIuNyAzMi43IDAgMCAwIDEyLjA2Ni0xNC4wMzVhMzIuNzEgMzIuNzEgMCAwIDAtMjEuMDExLTQ0LjkzNGEzMi43MiAzMi43MiAwIDAgMC0zMy45MSAxMC41MjdhMzMgMzMgMCAwIDAtMS40OCAxLjkxYTU0LjMgNTQuMyAwIDAgMC0xNy44NDggNS4xODRBNDYuNTQgNDYuNTQgMCAwIDEgNjAuMjUgMi4wOTRhNDYuNTMgNDYuNTMgMCAwIDEgMjYuMzQtLjM3NWM4LjYzMyAyLjQxOCAxNi4zODcgNy4yNzMgMjIuMzI0IDEzLjk4NHM5LjgxMyAxNSAxMS4xNiAyMy44NjNhNDYuNTQgNDYuNTQgMCAwIDEtMjAuNzU4IDQ2LjA3MU0zMC4xOCA0MS4xNTZsMTEuNDEgMS40MDJhMzIuNCAzMi40IDAgMCAxIDEuNDczLTYuNDY5YTQ2LjQgNDYuNCAwIDAgMC0xMi44ODMgNS4wNjZ6bTAgMCIvPjxwYXRoIGZpbGw9IiMyNGM4ZGIiIGQ9Ik0yOC4yMDcgNDIuMzYzYTQ2LjUgNDYuNSAwIDAgMSAxNi4xODgtNi41NTlhMzIuNiAzMi42IDAgMCAwLTIuMDA0IDExLjI5N2EzMyAzMyAwIDAgMCAuMTg4IDMuNTEyYTMyLjcgMzIuNyAwIDAgMC02Ljg1OSAzLjM3MUEzMi43IDMyLjcgMCAwIDAgMjMuNjUyIDY4LjAyYy0yLjU5IDUuNzQyLTMuNDYxIDEyLjExMy0yLjUyIDE4LjM0czMuNjY4IDEyLjA1MSA3Ljg0NCAxNi43N3M5LjYxNyA4LjEyOSAxNS42ODQgOS44MjRzMTIuNDk2IDEuNjA1IDE4LjUxMi0uMjYyYTMyLjcgMzIuNyAwIDAgMCAxNS40MDItMTAuMjY2YTM1IDM1IDAgMCAwIDEuNDg0LTEuOTE4YTU0LjMgNTQuMyAwIDAgMCAxNy44NTUtNS4yMjNhNDYuNSA0Ni41IDAgMCAxLTguNzIzIDE2LjAxMmE0Ni41IDQ2LjUgMCAwIDEtMjEuOTE4IDE0LjYwOWE0Ni41MyA0Ni41MyAwIDAgMS0yNi4zNC4zNzVhNDYuNiA0Ni42IDAgMCAxLTIyLjMyNC0xMy45ODRBNDYuNTYgNDYuNTYgMCAwIDEgNy40NTMgODguNDM0YTQ2LjUzIDQ2LjUzIDAgMCAxIDMuNTgyLTI2LjA5OGE0Ni41MyA0Ni41MyAwIDAgMSAxNy4xNzItMTkuOTczbTY5LjA3NCA0NC40NzNjLS4wNTkuMDM1LS4xMjEuMDY2LS4xOC4xMDJjLjA1OS0uMDM1LjEyMS0uMDY2LjE4LS4xMDJtMCAwIi8%2BPC9zdmc%2B">
  </a>
  <a href="https://cn.vuejs.org/">
    <img alt="Vue3" src="https://img.shields.io/badge/%E6%A1%86%E6%9E%B6-Vue3-%2341B883?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNDMxLjY0MDYyNDk5OTk5OTk0IiB2aWV3Qm94PSIwIDAgMjU2IDIyMSI%2BPHBhdGggZmlsbD0iIzQxQjg4MyIgZD0iTTIwNC44IDBIMjU2TDEyOCAyMjAuOEwwIDBoOTcuOTJMMTI4IDUxLjJMMTU3LjQ0IDB6Ii8%2BPHBhdGggZmlsbD0iIzQxQjg4MyIgZD0ibTAgMGwxMjggMjIwLjhMMjU2IDBoLTUxLjJMMTI4IDEzMi40OEw1MC41NiAweiIvPjxwYXRoIGZpbGw9IiMzNTQ5NUUiIGQ9Ik01MC41NiAwTDEyOCAxMzMuMTJMMjA0LjggMGgtNDcuMzZMMTI4IDUxLjJMOTcuOTIgMHoiLz48L3N2Zz4%3D">
    <a href="https://www.rust-lang.org/">
    <img alt="Rust" src="https://img.shields.io/badge/%E8%AF%AD%E8%A8%80-Rust-%23DC2626?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9IiNmZjcwNDMiIGQ9Im0zMCAxMmwtNC0yVjZoLTRsLTItNGwtNCAybC00LTJsLTIgNEg2djRsLTQgMmwyIDRsLTIgNGw0IDJ2NGg0bDIgNGw0LTJsNCAybDItNGg0di00bDQtMmwtMi00Wk02IDE2YTkuOSA5LjkgMCAwIDEgLjg0Mi00SDEwdjhINi44NDJBOS45IDkuOSAwIDAgMSA2IDE2bTEwIDEwYTkuOTggOS45OCAwIDAgMS03Ljk3OC00SDE2di0yaC0ydi0yaDRjLjgxOS44MTkuMjk3IDIuMzA4IDEuMTc5IDMuMzdhMS44OSAxLjg5IDAgMCAwIDEuNDYuNjNoMy4zNEE5Ljk4IDkuOTggMCAwIDEgMTYgMjZtLTItMTJ2LTJoNGExIDEgMCAwIDEgMCAyWm0xMS4xNTggNkgyNGEyLjAwNiAyLjAwNiAwIDAgMS0yLTJhMiAyIDAgMCAwLTItMmEzIDMgMCAwIDAgMy0zcTAtLjA4LS4wMDQtLjE2MUEzLjExNSAzLjExNSAwIDAgMCAxOS44MyAxMEg4LjAyMmE5Ljk4NiA5Ljk4NiAwIDAgMSAxNy4xMzYgMTAiLz48L3N2Zz4%3D">
  </a>
  <a href="https://www.tslang.cn/">
    <img alt="TypeScript" src="https://img.shields.io/badge/%E8%AF%AD%E8%A8%80-TypeScript-%230E80C1?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGZpbGw9IiMwRTgwQzEiIGQ9Ik0xMyA5Ljc1QTIuMjggMi4yOCAwIDAgMSAxMC41IDEyQTIuMjggMi4yOCAwIDAgMSA4IDkuNzVhLjUuNSAwIDAgMSAxIDBjMCAuOTI0LjgwOCAxLjI1IDEuNSAxLjI1czEuNS0uMzI2IDEuNS0xLjI1YzAtLjYwOC0uNjMzLS44OS0xLjY3Ni0xLjI4MVM4IDcuNiA4IDYuMjVBMi4yOCAyLjI4IDAgMCAxIDEwLjUgNEEyLjI4IDIuMjggMCAwIDEgMTMgNi4yNWEuNS41IDAgMCAxLTEgMEMxMiA1LjMyOCAxMS4xOTIgNSAxMC41IDVTOSA1LjMyOCA5IDYuMjVjMCAuNjA5LjYzMy44OSAxLjY3NiAxLjI4MkMxMS43MTkgNy45MjMgMTMgOC40IDEzIDkuNzVNNi43NSA0aC00LjVhLjUuNSAwIDEgMCAwIDFINHY2LjVhLjUuNSAwIDEgMCAxIDBWNWgxLjc1YS41LjUgMCAxIDAgMC0xIi8%2BPC9zdmc%2B">
  </a>
</div>

---

### 📝项目介绍

  本项目为 Tauri 2x 模版项目，前端采用了 Vue3 + Ts 开发，配置了基础的功能，项目采用了规范的目录结构，方便开发者快速上手和协作开发。

### 🖼️ 界面展示

<div style="display: flex; justify-content: center; flex-wrap: wrap;">
    <img width="45%" style="margin: 10px;" src="./src/assets/Images/MKImages/首页.png" alt="软件截图">
    <img width="45%" style="margin: 10px;" src="./src/assets/Images/MKImages/页面1.png" alt="软件截图">
    <img width="45%" style="margin: 10px;" src="./src/assets/Images/MKImages/页面2.png" alt="软件截图">
    <img width="45%" style="margin: 10px;" src="./src/assets/Images/MKImages/页面3.png" alt="软件截图">
    <img width="45%" style="margin: 10px;" src="./src/assets/Images/MKImages/页面4.png" alt="软件截图">
    <!-- 占位 -->
    <i style="width:45%; margin:10px; height:0;"></i>
</div>

### ✨ 功能特性
<table>
<table>
  <tr>
    <td style="border:3px solid #11cfddff;">
      <ol style="margin:0; padding:0; list-style-position:inside;">
        <li style="padding:8px 12px; border-bottom:2px dashed rgba(17,207,221,.35);">添加 axios 网络请求功能</li>
        <li style="padding:8px 12px; border-bottom:2px dashed rgba(17,207,221,.35);">配置 router 路由导航</li>
        <li style="padding:8px 12px;">添加 pinia，配置持久化</li>
      </ol>
    </td>
  </tr>
</table>


### 🛠️ 推荐安装插件

1. <img width="50" src="./src/assets/Images/MKImages/Vue - Official.png" alt="Vue - Official"> Vue - Official

2. <img width="50" src="./src/assets/Images/MKImages/logo.png" alt="Tauri"> Tauri

3. <img width="50" src="./src/assets/Images/MKImages/rust-analyzer.png" alt="rust-analyzer"> rust-analyzer


### 📥 使用教程

<a href="https://tauri.app/start/prerequisites/">点击查看前置条件</a>

1. 拉取项目

```shell
# gitee
git clone https://gitee.com/ZeroOpens/tauri-template.git

# github
git clone https://github.com/ZeroOpens/Tauri-Template.git
```

2. 安装依赖

```shell
# npm
npm install -g pnpm

# pnpm
pnpm install
```

3. 运行程序

```shell
# 运行
pnpm tauri dev
```
4. 打包程序

```shell
# 打包
pnpm tauri build
```

### 📁 工程结构解析

```
Tauri-Template
├── src                        # 前端目录
│   ├── assets                 # 静态资源
│   ├── components             # 全局组件
│   ├── hooks                  # 复用函数 
│   ├── pages                  # 路由页面
│   ├── router                 # 路由配置
│   ├── services               # 网络请求
│   ├── stores                 # 存储配置
│   ├── types                  # 类型声明
│   ├── utils                  # 工具函数
│   ├── App.vue                # 根组件
│   └── main.ts                # 入口文件
│   └── vite-env.d.ts          # Vite 类型声明文件
├── src-tauri                  # 后端目录
│   ├── icons                  # 应用图标
│   ├── src                    # Rust 源码目录
│   │   ├── handlers           # 命令处理器
│   │   ├── models             # 数据模型
│   │   ├── services           # 业务逻辑
│   │   ├── utils              # 工具函数
│   │   ├── error.rs           # 错误处理
│   │   └── lib.rs             # 服务层
│   │   └── main.rs            # 程序入口
│   ├── tauri.conf.json        # Tauri 项目的核心配置
│   └── Cargo.toml             # Rust 项目的依赖
├── .gitignore                 # git 忽略文件
├── index.html                 # H5 端首页
├── LICENSE                    # 开源协议
├── package.json               # 前端依赖
├── README.md                  # Markdown 说明文档
└── vite.config.ts             # vite 配置
```

### 📌 版本更新详情

<table>
  <tr>
    <th style="text-align:center; border:3px solid #008249ff; padding:5px 16px;">版本号</th>
    <th style="text-align:center; border:3px solid #008249ff; padding:5px 16px;">发布日期</th>
    <th style="text-align:center; border:3px solid #008249ff; padding:5px 16px;">更新内容</th>
  </tr>
  <!-- v1.5.0 -->
  <tr>
    <td style="text-align:center; border:3px solid #008249ff;">v1.5.0</td>
    <td style="text-align:center; border:3px solid #008249ff;">2025-10-02</td>
    <td style="border:3px solid #008249ff;">
      <ul style="margin:0 0 0 20px; padding:0;">
        <li>添加后端api请求示例代码</li>
        <li>添加请求后端api示例页面</li>
      </ul>
    </td>
  </tr>
  <!-- v1.4.0 -->
  <tr>
    <td style="text-align:center; border:3px solid #008249ff;">v1.4.0</td>
    <td style="text-align:center; border:3px solid #008249ff;">2025-09-20</td>
    <td style="border:3px solid #008249ff;">
      <ul style="margin:0 0 0 20px; padding:0;">
        <li>Tauri 版本更新至 2.8.5</li>
        <li>添加loading组件替换更新组件</li>
        <li>前端页面和样式调整</li>
      </ul>
    </td>
  </tr>
  <!-- v1.3.0 -->
  <tr>
    <td style="text-align:center; border:3px solid #008249ff;">v1.3.0</td>
    <td style="text-align:center; border:3px solid #008249ff;">2025-07-30</td>
    <td style="border:3px solid #008249ff;">
      <ul style="margin:0 0 0 20px; padding:0;">
        <li>tauri 版本升级2.6.2</li>
        <li>优化风格与布局</li>
        <li>添加更多示例</li>
      </ul>
    </td>
  </tr>
  <!-- v1.2.1 -->
  <tr>
    <td style="text-align:center; border:3px solid #008249ff;">v1.2.1</td>
    <td style="text-align:center; border:3px solid #008249ff;">2025-05-10</td>
    <td style="border:3px solid #008249ff;">
      <ul style="margin:0 0 0 20px; padding:0;">
        <li>添加router</li>
        <li>添加pinia、持久化插件</li>
        <li>添加更多的思路</li>
        <li>添加更多示例</li>
      </ul>
    </td>
  </tr>
  <!-- v1.1.1 -->
  <tr>
    <td style="text-align:center; border:3px solid #008249ff;">v1.1.1</td>
    <td style="text-align:center; border:3px solid #008249ff;">2025-05-06</td>
    <td style="border:3px solid #008249ff;">
      <ul style="margin:0 0 0 20px; padding:0;">
        <li>添加axios和拦截器</li>
        <li>添加跨域问题解决方法</li>
        <li>添加更多示例</li>
      </ul>
    </td>
  </tr>
  <!-- v1.1.0 -->
  <tr>
    <td style="text-align:center; border:3px solid #008249ff;">v1.1.0</td>
    <td style="text-align:center; border:3px solid #008249ff;">2025-05-06</td>
    <td style="border:3px solid #008249ff;">
      <ul style="margin:0 0 0 20px; padding:0;">
        <li>添加更多示例</li>
        <li>修改、删除多余文件</li>
        <li>配置 @ 指定前端src为顶级文件</li>
      </ul>
    </td>
  </tr>
  <!-- v1.0.0 -->
  <tr>
    <td style="text-align:center; border:3px solid #008249ff;">v1.0.0</td>
    <td style="text-align:center; border:3px solid #008249ff;">2025-05-05</td>
    <td style="border:3px solid #008249ff;">
      <ul style="margin:0 0 0 20px; padding:0;">
        <li>初始版本发布</li>
      </ul>
    </td>
  </tr>
</table>