如何用tauri + vue 搭建一个windows应用

导语

本次实验，使用 tauri 作为桌面框架，使用 Rust 语言作为后端，使用 axum 作为后端框架，使用 vue3 + element-plus 作为前端UI，使用 cargo + npm 作为包管理器，使用 vite 作为前端打包工具，使用 TS 作为前端开发语言
使用 websocket 作为通信协议

npm 官网
https://www.npmjs.com/package/npm
https://docs.npmjs.com/

1.用vite创建一个vue项目

vite 官网
https://vitejs.cn/

1	npm create vite@latest

cd vite-project
npm install
npm run dev

VS Code 安装的插件

JavaScript and TypeScript Nightly
Tauri
rust-analyzer
Vue Language Features (Volar)

CodeLLDB
es6-string-html

添加到 github 进行版本管理

在项目根目录下初始化

初始化本地仓库

git init

执行效果如下：

1 2	PS E:\RustProject\espect-launcher> git init Initialized empty Git repository in E:/RustProject/espect-launcher/.git/

当前分支更名为main

1	git branch -M main

添加本地所有文件到本地仓库

git add .

提交本次修改（新增加文件）到本地仓库

1	git commit -m "new project"

执行效果如下：

PS E:\RustProject\espect-launcher> git commit -m "new project"
[main (root-commit) 167eb52] new project
 16 files changed, 1713 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .vscode/extensions.json
 create mode 100644 README.md
 create mode 100644 index.html
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/vite.svg
 create mode 100644 src/App.vue
 create mode 100644 src/assets/vue.svg
 create mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/main.ts
 create mode 100644 src/style.css
 create mode 100644 src/vite-env.d.ts
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 create mode 100644 vite.config.ts

添加远程仓库（origin）

1	git remote add origin git@github.com:DreamingPoet/espect_launcher.git

推送当前main 分支到远程仓库（origin）

1	git push -u origin main

执行效果如下：

PS E:\RustProject\espect-launcher> git push -u origin main 
Enumerating objects: 23, done.
Counting objects: 100% (23/23), done.
Delta compression using up to 16 threads
Compressing objects: 100% (18/18), done.
Writing objects: 100% (23/23), 13.42 KiB | 859.00 KiB/s, done.
Total 23 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), done.
To github.com:DreamingPoet/espect-launcher.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

安装 element-plus
npm install element-plus –save
http://element-plus.org/

安装后端相关

tauri官网
https://tauri.app/

install tauri cli

初始化后端Rust，添加 tauri
cargo tauri init

PS E:\RustProject\espect-launcher> cargo tauri init
✔ What is your app name? · espect-launcher
✔ What should the window title be? · espect-launcher
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist
✔ What is the url of your dev server? · http://localhost:8080
✔ What is your frontend dev command? · npm run dev    
✔ What is your frontend build command? · npm run build

启动调试
cargo tauri dev