Rust Tauri系列: 项目创建

创建 Rust - Tauri

## 创建rust Tauri项目
pnpm create tauri-app
->项目名称 test-app
->选择 TypeScript / JavaScript  (pnpm, yarn, npm, bun)
->选择包管理工具(熟悉那个就用那个)
->选择 vue (熟悉那个就用那个)
->选择TypeScript 或者 js

# 运行启动
cd test-app
pnpm install
pnpm tauri dev 

# 添加quasar UI or Element Plus 都可以
pnpm add quasar @quasar/extras
pnpm add -D @quasar/vite-plugin [email protected]

# main.ts or main.js
# Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'

# Import Quasar css
import 'quasar/dist/quasar.css'

const myApp = createApp(App)

# quasar 的插件配置
myApp.use(Quasar, {
    plugins: {
        Notify
    }, // import Quasar plugins and add here
    config:{
        notify: { /* look at QuasarConfOptions from the API card */ }
    }
})

myApp.mount("#app");



# vite.config.ts
.....
 plugins: [
      vue({
        template: { transformAssetUrls }
      }),
    quasar({
      sassVariables: 'src/quasar-variables.sass'
    })
  ],
.....

pinia 状态管理

pnpm i pinia --save

# store/index.ts
import { createPinia } from 'pinia'  

const store = createPinia()  

export default store

# mian.ts 挂载使用

axios

pnpm i axios

# api/index.ts

import axios from 'axios';

const service = axios.create({
    baseURL: 'http://127.0.0.1:7777/',
    timeout: 120000 // request timeout
});

// 请求拦截器
service.interceptors.request.use(
    (config) => {
        // do something
        return config;
    },
    (error) => {
        Promise.reject(error);
    }
);

// 响应拦截器
service.interceptors.response.use(
    async (response) => {
        // do something
        return response.data
    },
    (error) => {
        // do something
        return Promise.reject(error);
    }
);

export default service;


# main.ts 全局挂载
import  api from '@/api/index.ts'
const myApp = createApp(App)
myApp.config.globalProperties.$axios = api;

router

pnpm i vue-router --save

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    {
        path: '/login',
        name: 'Login',
        meta: {
            title: '登录',
            keepAlive: true,
            requireAuth: false
        },
        component: () => import('@c/Login.vue')
    },
    {
        path: '/',
        name: 'Index',
        meta: {
            title: '首页',
            keepAlive: true,
            requireAuth: true
        },
        component: () => import('@c/home/Index.vue')
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});
export default router;

// mmain.ts  内使用

编写vite.confg.ts 配置 路径别名

# 安装
pnpm add  @types/node -D

# 添加
import { resolve } from 'path'

export default defineConfig(async () => ({
....
....
  resolve: {
    alias: {  // 这里就是需要配置resolve里的别名
      "@": resolve(__dirname, "./src"), // resolve 记得引入
      "@assets": resolve(__dirname, "./src/assets"), // resolve 记得引入
      "@view": resolve(__dirname, "./src/view"), // resolve 记得引入
      "@c": resolve(__dirname, "./src/components"), // path记得引入

      // 'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
    },
  },

})

最后项目依赖:

前端目录:

最后vite.config.ts文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import { resolve } from 'path'

export default defineConfig(async () => ({
  plugins: [
      vue({
        template: { transformAssetUrls }
      }),
    quasar({
      sassVariables: 'src/quasar-variables.sass'
    })
  ],
  resolve: {
    alias: {  // 这里就是需要配置resolve里的别名
      "@": resolve(__dirname, "./src"), // path记得引入
      "@assets": resolve(__dirname, "./src/assets"), // path记得引入
      "@view": resolve(__dirname, "./src/view"), // path记得引入
      "@c": resolve(__dirname, "./src/components"), // path记得引入

      // 'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
    },
  },


  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  //
  // 1. prevent vite from obscuring rust errors
  clearScreen: false,
  // 2. tauri expects a fixed port, fail if that port is not available
  server: {
    port: 1420,
    strictPort: true,
  }
}));

下一节:与Rust互动