创建一个新的Tauri+Vue 桌面windows项目

环境安装步骤:

1、必须安装 Microsoft Visual Studio C++ 构建工具
2、Node.js 运行时和包管理器
3、Rustc 和 Cargo 包管理器
4、安装 WebView2
5、创建项目


1、安装 Microsoft Visual Studio C++ 构建工具

因为我本机安装了Visual Studio 2019,安装vs2019时自动安装了构建工具,所以我这里就没操作这步。

Microsoft Visual Studio C++
创建一个新的Tauri+Vue 桌面windows项目_第1张图片

2、Node.js 运行时和包管理器

node 版本在12以上

3、Rustc 和 Cargo 包管理器

现在你需要安装Rust。最简单的方法是使用官方安装程序rustup。

64位下载链接
32位下载链接
创建一个新的Tauri+Vue 桌面windows项目_第2张图片
双击运行rustup-init.exe,按默认1就可以了。
创建一个新的Tauri+Vue 桌面windows项目_第3张图片
出现上面“Press the Enter key to continue”安装完成了,按回车结束。

4、安装 WebView2

下载地址 WebView2
创建一个新的Tauri+Vue 桌面windows项目_第4张图片

上面步骤安装完后,一定要重新启动计算机,以免部分环境没有生效

5、创建项目

yarn create tauri-app
#OR
npx create-tauri-app

用vscode打开一个存放项目的目录文件夹,执行上面命令会创建一个tauri-app文件夹名称的项目。
创建一个新的Tauri+Vue 桌面windows项目_第5张图片
根据你的情况自己配置项目信息
创建一个新的Tauri+Vue 桌面windows项目_第6张图片

安装 @tauri-apps/api
在这里插入图片描述

选择vite模板
创建一个新的Tauri+Vue 桌面windows项目_第7张图片

安装依赖
创建一个新的Tauri+Vue 桌面windows项目_第8张图片

创建成功(上面的失败还没查到什么原因),项目文件是创建成功了。
创建一个新的Tauri+Vue 桌面windows项目_第9张图片

打开package.json,在scripts里面修改启动命令:

"tauri": "tauri" 
修改为:
"tauri": "tauri dev"

创建一个新的Tauri+Vue 桌面windows项目_第10张图片

在终端执行:npm run tauri
创建一个新的Tauri+Vue 桌面windows项目_第11张图片

第一次运行此命令时,Rust 包管理器需要几分钟时间来下载和构建所有必需的包,请赖心等待
创建一个新的Tauri+Vue 桌面windows项目_第12张图片
到这里就构建完成了
在这里插入图片描述

项目展示
创建一个新的Tauri+Vue 桌面windows项目_第13张图片

你可能感兴趣的:(vue,windows,vue.js,rust)