Tauri+Vite+Vue3创建项目

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

1.  
   import { createRouter, createWebHistory } from 'vue-router'
2.  
    
3.  
   const routerHistory = createWebHistory()
4.  
    
5.  
   const router = createRouter({
6.  
   history: routerHistory,
7.  
   routes: [
8.  
   {
9.  
   path: '/',
10.  
    component: () => import('../views/Home.vue')
11.  
    },
12.  
    {
13.  
    path: '/about',
14.  
    component: () => import('../views/About.vue')
15.  
    }
16.  
    ]
17.  
    })
18.  
    export default router

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

4、修改main.js

1.  
   import { createApp } from "vue";
2.  
   import "./style.css";
3.  
   import router from './router'//添加这个
4.  
   import App from "./App.vue";
5.  
    
6.  
   // createApp(App).mount("#app");//原来的
7.  
   createApp(App).use(router).mount('#app')//修改之后

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

1.  
   <script setup>
2.  
   // This starter template is using Vue 3 <script setup> SFCs
3.  
   // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
4.  
   import Greet from "./components/Greet.vue";
5.  
   </script>
6.  
    
7.  
   <template>
8.  
   <div class="container">
9.  
   <!-- <h1>Welcome to Tauri!</h1>
10.  
     
11.  
    <div class="row">
12.  
    <a href="https://vitejs.dev" target="_blank">
13.  
    <img src="/vite.svg" class="logo vite" alt="Vite logo" />
14.  
    </a>
15.  
    <a href="https://tauri.app" target="_blank">
16.  
    <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
17.  
    </a>
18.  
    <a href="https://vuejs.org/" target="_blank">
19.  
    <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
20.  
    </a>
21.  
    </div>
22.  
     
23.  
    <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
24.  
     
25.  
    <p>
26.  
    Recommended IDE setup:
27.  
    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
28.  
29.  
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
30.  
31.  
    <a href="https://github.com/tauri-apps/tauri-vscode" target="_blank"
32.  
    >Tauri</a
33.  
    >
34.  
35.  
    <a href="https://github.com/rust-lang/rust-analyzer" target="_blank"
36.  
    >rust-analyzer</a
37.  
    >
38.  
    </p>
39.  
     
40.  
     
41.  
    <!-- 添加下面这个标签 -->
42.  
    <router-view></router-view>
43.  
     
44.  
    </div>
45.  
    </template>
46.  
     
47.  
    <style scoped>
48.  
    .logo.vite:hover {
49.  
    filter: drop-shadow(0 0 2em #747bff);
50.  
    }
51.  
     
52.  
    .logo.vue:hover {
53.  
    filter: drop-shadow(0 0 2em #249b73);
54.  
    }
55.  
    </style>

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

home页面

about页面 

这篇好文章是转载于：学新通技术网