Tauri教程-基础篇-第一节 Tauri项目创建及结构说明

请添加图片描述

“如果结果不如你所愿，就在尘埃落定前奋力一搏。”——《夏目友人帐》
“有些事不是看到了希望才去坚持，而是因为坚持才会看到希望。”——《十宗罪》
“维持现状意味着空耗你的努力和生命。”——纪伯伦

Tauri 技术教程 * 第四章 Tauri的基础教程
第一节项目创建及结构说明

一. 概述

这一章节，我们来了解下如何创建一个Tauri的项目，熟悉下它的目录结构，以及如何运行和发布。

官方文档：https://tauri.app/start/create-project/

二. 创建项目

官方提供了一个“create-tauri-app ”工具来帮助我们创建一个基础版本的项目。

create-tauri-app 目前包含以下模板：无框架（纯HTML、CSS and JavaScript）、Vue.js、Svelte、React、SolidJS、Angular、Preact、Yew、Leptos 和 Sycamore。您还可以在 Awesome Tauri 仓库中找到或添加您自己的社区模板和框架。

当然若想在自己的前端项目中使用Tauri也是可以的，您可以将 Tauri 添加到现有的项目中以便快速地将现有代码库转换为 Tauri 应用。

1. 使用 create-tauri-app

1. 创建项目

这里使用 pnpm来创建项目，其他方式可参见官方文档：

pnpm create tauri-app

2. 选择适合自身项目的模板

✔ Project name · tauri-app01
✔ Identifier · com.tauri-app01.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · TypeScript

3. 安装项目依赖

// cd 到项目目录下
cd tauri-app01
// 使用pnpm 安装项目依赖 为了保证安装速录可以设置仓库源  
// pnpm config set registry https://registry.npmmirror.com
pnpm i

2. 使用 Tauri CLI

此方式主要用于在现有的项目中添加tauri,（现有的项目是前端的项目，不要辖理解）

1. 安装cll依赖包

包管理器安装 Tauri 的 CLI 工具

pnpm add -D @tauri-apps/cli@latest

2. 确认服务器的 URL

确定您的前端开发服务器的 URL。这个 URL 是 Tauri 用来加载您的内容的地址。例如，如果您正在使用 Vite，那么默认的 URL 是 http://localhost:5173 。

这里需要考虑你项目的访问不要有前缀，当然你也可以修改它以满足要求

3. 初始化Tauri项目配置

在项目的根目录下：

pnpm tauri init

过程中你需要选择一些内容：

✔ What is your app name? tauri-app01
✔ What should the window title be? tauri-app01
✔ Where are your web assets located? ..
✔ What is the url of your dev server? http://localhost:5173
✔ What is your frontend dev command? pnpm run dev
✔ What is your frontend build command? pnpm run build

三. 运行及构建项目

当您完成创建项目的步骤后，你就可以运行它，以感受下它的能力，在 “创建项目” 这一个环节中，如果你使用的是create-tauri-app的方式基本不会出现什么问题，但你如果是基于cll 的方式来创建项目就需要关注下项目的复杂度，可能在这一环节无法运行，我更建议使用基于create-tauri-app的方式创建我们需要的项目后，再将原项目逐步迁移过来。（这里http的方式要注意：axiso,alove是不适用的请求工具类，需要改造，或许你可以通过一些方式解决，但不推荐）

我们使用vscode进行项目的开发；在使用之前你需要为你的vscode安装rust的环境：

tauri
rust-analyzer

1. 运行项目：

pnpm tauri dev

注意：pnpm dev 启动的是前端项目，有些人可能会考虑我只想调试前端项目，而不需要后端，这里目前来看是行不通的，它不太像uniapp那样提供多运行环境的支持。

首次启动时，是比较慢的（可以适当冲杯茶，放松一下，前提是你要保证你的机器连接互联网），不要轻易修改tauri下的文件，会重新加载，慢

请添加图片描述

2. 构建项目

pnpm tauri build

首次编译的时间会比较长，需要在对应的环境下编译需要的应用程序，在window下编程后的文件放在：src-tauri\target\release\bundle 下

msi 安装文件
nsis 安装文件
src-tauri\target\release 下有一个exe的免安装程序

此时安装文件的步骤都是英文的，后续我们再探讨如何设定安装步骤及语言。

四. 项目目录结构

使用 create-tauri-app 创建的项目目录如下：

这里我们以 vite6,typescript 为例

vscode
node_modules
public
src
src-tauri
- capabilities 能力（Capabilities）是tauri或插件所提供的，是一组权限
  - default.json 权限配置文件
- gen
  - schemas 存放描述文件
- icons 系统的图标，采用命令生成
- src 服务端代码的存放位置
  - lib.rs 我们安装依赖的配置文件
  - main.rs 主入口
- target 编译后的文件目录
- build.rs build的入口文件
- cargo.toml cargo的配置文件
- tauri.conf.json tauri的配置文件
index.html
package.json
tsconfig.json
vite.config.ts