vue+vite使用element plus如何引入 ts类型声明

在Vue + Vite项目中引入Element Plus并添加TypeScript类型声明，你需要做以下几个步骤：

1. 安装Element Plus和TypeScript：首先确保已经安装了Vue CLI，然后运行以下命令安装Element Plus和`@types/element-plus`用于类型支持：

   npm install element-plus @vue/cli-plugin-vuex @vue/cli-plugin-eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
   npm install @types/element-plus --save-dev

2. 配置Vite：打开`vite.config.ts`文件，添加`tsconfig.json`配置，以便Vite使用TypeScript构建：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';

   const isProd = process.env.NODE_ENV === 'production';

   export default defineConfig({
     plugins: [vue()],
     build: {
       target: 'esnext', // 这里指定输出目标，让Element Plus可以正常使用
     },
     transpileDependencies: ['element-plus'], // 指定需要转译的依赖包
     base: './',
     optimizeDeps: {
       include: ['element-plus'],
     },
     typescript: {
       compilerOptions: {
         typeRoots: ['./node_modules/@types',], // 设置TypeScript查找类型声明的位置
         declaration: true, // 输出类型声明文件
       },
     },
   });

3. 引入类型声明：在项目的全局目录创建一个名为`global.d.ts`（或者根据实际情况自定义）的 TypeScript 全局类型声明文件，导入Element Plus的类型：

   // global.d.ts
   declare module '*.vue' {
     import Vue from 'vue'
     export default Vue
   }

   // 如果Element Plus有特定的类型模块需要导出，例如 ElementPlus
   import { ElOption } from 'element-plus';
   declare module 'element-plus' {
     export interface ElOption extends Vue {}
   }

4. 使用Element Plus组件：现在可以在`.vue`文件中正常引用Element Plus组件，并且编译器会根据你在`global.d.ts`中的声明提供类型检查。