1.1、 vite-plugin-vue-setup-extend

vite-plugin-vue-setup-extend 是一个 Vite 插件，它的主要用途是让你在 Vue 3 项目里，能够给 <script setup> 标签添加额外的属性，特别是 name 属性，以便 Vue DevTools 调试、递归组件调用、使用过渡动画。

例如：

<script setup name="MyComponent">
// 现在组件有了 name 属性
</script>

安装方法， 项目目录下进入terminal 运行

npm i vite-plugin-vue-setup-extend -D

1.2、element-plus

ElementUI 和 ElementPlus 都是用于构建 Web 界面的组件库，但它们在以下方面存在明显区别：

ElementUI：它是为 Vue 2.x 版本量身打造的。Vue 2 是 Vue.js 框架的旧版本，采用 Object.defineProperty 来实现响应式原理。

ElementPlus：专门适配 Vue 3.x 版本。Vue 3 使用 Proxy 实现响应式，性能更优，并且引入了组合式 API，让代码组织和复用更方便。

安装方法， 项目目录下进入terminal 运行

npm i element-plus
npm i @element-plus/icons-vue

注：在当前的 npm 版本里，npm i element-plus --save 和 npm i element-plus 效果是相同的，都会把 element-plus 记录到 package.json 的 dependencies 字段中 如果你想将包安装到开发环境依赖（即 package.json 的 devDependencies 字段），可以使用 --save-dev 或 -D 选项，示例如下：

npm install some-dev-package --save-dev
# 或者
npm install some-dev-package -D

然后在main.ts中进行加载配置

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

1.3、openapi

安装openapi 插件可以根据服务端生成标准json接口文档生成TS 客户端

1.3.1 安装

项目目录下进入terminal 运行

npm i

1.3.2 配置

工程根目录下新增 openapi.config.js, 配置示例如下：

import { generateService } from '@umijs/openapi'

generateService({
  requestLibPath: "import request from '@/utils/request'", // 请求所在包
  schemaPath: 'http://localhost:8080/aiapi/v3/api-docs', // 后端服务标准接口Json文档
  serversPath: './src', // 生成后代码位置
})

代码中 import request from '@/utils/request 需要提前在工程指定位置创建，request.ts代码如下： 虽然axios 默认返回需要通过 res.data 来获取，但是如果配置了拦截器， 直接都默认返回res.data , 则会影响 openapi生成的客户端参数和返回值类型。因此本处没有使用拦截器

import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'

const BASE_URL = import.meta.env.VITE_API_PREFIX
const request = axios.create({
  baseURL: BASE_URL,
  timeout: 600000,
})

export default request

package.json 增加脚本 "openapi": "node openapi.config.js"

1.3.3 使用

执行 package.json 的脚本，会在src目录下生成 api文件夹，其中包含客户端ts 和 对应类型定义 typing.d.ts vue中引入示例

import Controllers from '@/api/index'

const msg:API.Message = {"msg": "今天天气怎么样"}

Controllers.SpringAiController.chat(msg);

FAQ

vue3 vite项目 启动后，访问打开链接 ，有时候带着路径的页面刷新 无法访问怎么解决

在开发环境中，你可以对 Vite 的开发服务器进行配置，让其把所有请求都重定向到 index.html，这样就能确保前端路由可以正常工作。 在 vite.config.js 或者 vite.config.ts 文件里添加如下配置：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    historyApiFallback: true
  }
})

在生产环境中，你需要依据所使用的服务器进行相应的配置。 try_files 指令会先尝试查找请求的文件，如果找不到，就会重定向到 index.html。

location / {
    try_files $uri $uri/ /index.html;
}