Tauri Vue3 项目初始化配置

前言

近期，ChatGPT火速成为了炙手可热的话题，市面上涌现出了众多客户端应用。我尝试了其中的几款，但似乎都难以满足我挑剔的品味。既然如此，何不趁此机会重拾旧日的代码技艺，亲自开发一款心仪的客户端呢？这两年来，我的编程经历略显稀少，是时候重新操练一番，尝试一下新鲜的技术栈。

在仔细研究了一些开源ChatGPT客户端的源码后，我决定采用Tarui框架，搭配Vue3和TypeScript来打造属于我的应用。那么，不如先从创建一个项目开始！

以上为ChatGPT4为我写的开头

Vue3开发环境

Vue3

npm init vue@latest

• Typescript
• Vue-router
• ESLint
• Pinia

以上已自动安装

Vuetify 3

Autoimport

npm install unplugin-auto-import -S

修改配置vite.config.ts添加红框内的内容

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      eslintrc: {
        enabled: true
      },
      imports: ['vue', 'vue-router', 'pinia'],
      vueTemplate: true,
    }),],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

修改tsconfig.json增加红框内内容

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "auto-imports.d.ts"
  ],
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

修改.eslintrc.cjs 增加红框内内容

.eslintrc-auto-import.json和auto-imports.d.ts为vite启动项目时自动生成

Tauri开发环境

前置准备工作

预先准备 | Tauri Apps

安装 TAURI CLI

npm install --save-dev @tauri-apps/cli

初始化项目

进入到之前创建好的Vue项目

npm run tauri init

并回答对于的问题

运行Tauri项目

npm run tauri dev