【vue3+ts+vite】自动导入(import)库

前言

在开发过程中，我们经常需要在页面中导入vue和element-plus，每次这样导入就会很麻烦

import { ref } from "vue";
import { ElMessageBox, ElMessage } from 'element-plus'

下面是优化过程

第一步、安装依赖

npm i  unplugin-vue-components unplugin-auto-import

第二步、配置

//自动导入组件
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
......
    AutoImport({ 
      imports: ['vue', 'vue-router'],
      resolvers: [ElementPlusResolver()],
     }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
    ......
});

完成以上配置，即可不用每次import vue 和 element-plus李