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

   “如果结果不如你所愿，就在灰尘落定前奋力一搏。”——《夏目友人帐》
“有些事不是看到了希望才去坚持，而是由于坚持才会看到希望。”——《十宗罪》
“维持近况意味着空耗你的积极和生命。”——纪伯伦
    Tauri 技能教程 * 第四章 Tauri的基础教程  
  第一节 项目创建及结构阐明  推荐

Koi技能教程-Tauri-第二章 Tauri的业务架构
Koi技能教程-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来创建项目，其他方式可参见官方文档：

1. pnpm create tauri-app

复制代码

2. 选择得当自身项目标模板

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

复制代码

3. 安装项目依赖

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

复制代码

2. 利用 Tauri CLI

此方式重要用于在现有的项目中添加tauri,（现有的项目是前端的项目，不要辖明确）
1. 安装cll依赖包

包管理器安装 Tauri 的 CLI 工具

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

复制代码

2. 确认服务器的 URL

确定您的前端开发服务器的 URL。这个 URL 是 Tauri 用来加载您的内容的地点。例如，如果您正在利用 Vite，那么默认的 URL 是 http://localhost:5173 。
这里须要考虑你项目标访问不要有前缀，当然你也可以修改它以满足要求
3. 初始化Tauri项目设置

在项目标根目录下：

1. pnpm tauri init

复制代码

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

1. ✔ What is your app name? tauri-app01
2. ✔ What should the window title be? tauri-app01
3. ✔ Where are your web assets located? ..
4. ✔ What is the url of your dev server? http://localhost:5173
5. ✔ What is your frontend dev command? pnpm run dev
6. ✔ 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. 运行项目：

1. pnpm tauri dev

复制代码

留意：pnpm dev 启动的是前端项目，有些人可能会考虑我只想调试前端项目，而不须要后端，这里目前来看是行不通的，它不太像uniapp那样提供多运行情况的支持。
初次启动时，是比较慢的（可以得当冲杯茶，放松一下，前提是你要保证你的机器连接互联网），不要轻易修改tauri下的文件，会重新加载，慢

2. 构建项目

1. 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
  

这里。vscode、node_modules、public、src、package.json 都是我们普遍相识的，如果你不清晰，你可以结束本次的学习，相识下如何构建前端项目，再回来继续学习。
src-tauri 是本项目标重点。在此目录中 capabilities、lib.rs、cargo.toml、tauri.conf.json、icons是我们重点关注的文件，后续章节中我们会反复应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。