创建tauri应用
推荐参考官方文档:https://tauri.app/v1/guides/
创建命令:
npm create tauri-app@latest
💡注意:请确保Node.js和Rust已经正确安装
在创建过程中,需要根据提示选择配置项。
主要配置有:
-
项目名称:例如
my-app
。 -
前端语言:可选择
TypeScript / JavaScript
和Rust
,这里选择TypeScript / JavaScript
。 -
包管理器:可选
pnpm
、yarn
、npm
,这里选择常用的npm
。 -
UI模板:可选
Vanilla
、Vue
、Svelte
、React
、Solid
、Angular
,选择Vue即可。 -
UI语言风格:可选
TypeScript
和JavaScript
,任选一个即可,这里选择JavaScript。
创建完成后的主要目录结构:├─public 公共资源文件,例如图片、视频等静态资源 ├─src vue根目录 │ ├─assets 存放Vue资源文件 │ ├─components 存放Vue资源文件 │ ├─App.vue Vue应用容器 │ └─main.js 入口 └─src-tauri tauri根目录 ├─icons tuari应用图标 └─src tauri后端跟目录,即rust目录,如果不需要使用rust开发则无需关注
运行应用
首先进入到my-app
目录下,执行以下命令:
# 安装依赖项
npm install
# 启动应用
npm run tauri dev
💡注意:
- 如果npm很慢,可以安装cnpm,然后执行
cnpm install
即可。- 首次执行
npm run tauri dev
后,会自动下载rust相关的依赖,并编译,此过程耗时比较长,预计会持续5~10分钟左右,请耐心等待。
如果遇到如下错误:
warning: spurious network error (2 tries remaining): [28] Timeout was reached (Failed to connect to github.com port 443 after 21239 ms: Timed out); class=Net (12)
则说明网络不好,连接失败,可以多尝试几次,建议挂代理加速请求。
等待编译完成后,就可以看到应用界面啦:
哇哦,泰裤辣!
接下来就可以愉快的开发了,开发过程中如果没有涉及到和tauri后端通信,则无需关注rust部分,完全使用Vue开发即可。
提示:tauri创建的前端工程,默认使用vite,如果你更熟悉webpack,也是可以更换的。