1、按照官网文档创建tauri项目

npm create tauri-app

然后按顺序填：

1、项目名称： 2、选择你的package manager 3、选择你的前端框架

 

然后再一步一步执行下面命令

cd 刚才创建的项目名称

npm install

npm run tauri dev

然后出现

第一次可能没有反应（或者需要=很久才有反应），ctrl+c 退出，然后重新npm run tauri dev。这个时候就可以桌面程序dev了

 第一次运行有点久，等吧

点击查看

但是目录结构没有路由和视图，需要我们自己添加。

1、添加路由，先安装vue3路由版本4以上

npm i vue-router -S

2、添加路由目录router文件夹,在里面新建index.js

import { createRouter, createWebHistory } from 'vue-router'

const routerHistory = createWebHistory()

const router = createRouter({

history: routerHistory,

routes: [

{

path: '/',

component: () => import('../views/Home.vue')

},

{

path: '/about',

component: () => import('../views/About.vue')

}

]

})

export default router

3、添加视图目录views文件夹，添加2个文件Home.vue,About.vue,里面内容随便写写

4、修改main.js

import { createApp } from "vue";

import "./style.css";

import router from './router'//添加这个

import App from "./App.vue";

// createApp(App).mount("#app");//原来的

createApp(App).use(router).mount('#app')//修改之后

5、在App.vue里面添加router-view标签

6、重新运行，查看路由是否生效，效果如下：

home页面

about页面 

 

推荐链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：