网站的主题定位,怎么做网站的跳转,网站设计大作业,机械外发加工网“如果结果不如你所愿#xff0c;就在尘埃落定前奋力一搏。”——《夏目友人帐》 “有些事不是看到了希望才去坚持#xff0c;而是因为坚持才会看到希望。”——《十宗罪》 “维持现状意味着空耗你的努力和生命。”——纪伯伦 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来创建项目其他方式可参见官方文档
pnpm create tauri-app2. 选择适合自身项目的模板
✔ 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 · TypeScript3. 安装项目依赖
// cd 到项目目录下
cd tauri-app01
// 使用pnpm 安装项目依赖 为了保证安装速录可以设置仓库源
// pnpm config set registry https://registry.npmmirror.com
pnpm i2. 使用 Tauri CLI
此方式主要用于在现有的项目中添加tauri,现有的项目是前端的项目不要辖理解
1. 安装cll依赖包
包管理器安装 Tauri 的 CLI 工具
pnpm add -D tauri-apps/clilatest2. 确认服务器的 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的环境
taurirust-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 为例
vscodenode_modulespublicsrcsrc-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.htmlpackage.jsontsconfig.jsonvite.config.ts
这里。vscode、node_modules、public、src、package.json 都是我们普遍了解的如果你不清楚你可以结束本次的学习了解下如何构建前端项目再回来继续学习。
src-tauri 是本项目的重点。在此目录中 capabilities、lib.rs、cargo.toml、tauri.conf.json、icons是我们重点关注的文件后续章节中我们会反复应用。
