vue3+Vite+Ts 中使用自动引入，解放双手

一： 自动引入VUE API

解决的问题：避免在每个vue组件中都重复性的去声明ref,reactive等。如下：

import {ref, reactive} from  ``'vue'` `// 配置自动导入，用来省略这句手动引入`

const test = ref(``'aaaa'``)

配置unplugin-auto-import

安装vite插件：unplugin-auto-import yarn add unplugin-auto-import -D

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
    }),
  ],
});

可能遇到ts,eslint不识别而导入报错的问题

1、typescript 报错：'reactive' is not defined. 原因：TS未识别到vue api,没有相应的模块声明文件

处理：在vite中配置并生成auto-imports.d.ts ，并在tsconfig.json中引入

// vite.config.js

// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      // 生成自动导入的TS声明文件
       dts: "/auto-import.d.ts", 
    }),
  ],
});

// tsconfig.json

{
	 "include": [
	    "src/**/*.d.ts",
	    "./*.d.ts",
	    "./auto-imports.d.ts" // 导入上一步生成的配置文件
	  ],
}

2、eslint不识别报错 error 'reactive' is not defined no-undef

原因：未配置自动导入相应的eslint规则
处理：通过autoimport中的配置生成对应.eslintrc-auto-import.json配置文件，并在.eslintrc中引入 生成之后enbled:false 避免重复生成

// vite.config.js  
{
	// ......
	 AutoImport({
      imports: ["vue"],
      resolvers: [ElementPlusResolver()],
      dts: "/auto-import.d.ts",
      eslintrc: {
        enabled: true,  // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
      },
    }),
}

3 配置src/component目录下的组件自动引入`

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
    }),
	Components({
      // 指定自动导入的组件位置，默认是 src/components
       dirs: ['src/components','src/otherComponents'],
    }),
  ],
});

二：按需引入element-plus

参考官网 用到unplugin-vue-components 和 unplugin-auto-import这两款插件

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
    // 自动导入element相关函数，如：ElMessage, ElMessageBox..
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    // 自动导入element相关组件
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

配置

unplugin-auto-import会默认在要目录生成auto-imports.d.ts文件，unplugin-vue-components对应会在根目录生成components.d.ts文件，分别描述自动导入的 API、component。通过在tsconfig.json的include中引入对应配置文件，避免TS报错。

AutoImport({
  // ...
  // 配置文件生成位置，默认是根目录 /auto-imports.d.ts
  // dts: './auto-imports.d.ts',
}),
Components({
  // ...
  // 配置文件生成位置，默认是根目录 /components.d.ts
  // dts: './components.d.ts',
}),