0%

Tauri Vue3 项目初始化配置

前言

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

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

以上为ChatGPT4为我写的开头

Vue3开发环境

Vue3

1
npm init vue@latest

Tauri Vue3 项目初始化配置

  • Typescript
  • Vue-router
  • ESLint
  • Pinia

以上已自动安装

Vuetify 3

Autoimport

1
npm install unplugin-auto-import -S

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

Tauri Vue3 项目初始化配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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增加红框内内容

Tauri Vue3 项目初始化配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"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 增加红框内内容

Tauri Vue3 项目初始化配置

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

Tauri开发环境

前置准备工作

预先准备 | Tauri Apps

安装 TAURI CLI

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

初始化项目

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

1
npm run tauri init

并回答对于的问题

运行Tauri项目

1
npm run tauri dev