问题: 想通过unplugin-vue-components实现Element-Plus组件的自动引入, 配置后报错,如下图

当前使用的环境以及包版本:

"element-plus": "^2.6.3", // 我遇到的情况这个版本会导致上面的报错
"vue": "^3.4.21",
"vue-router": "^4.3.0"
"node": "18.20.1"

解决方案:

直接使用Element-Plus的2.1版本 npm i element-plus@2.1

问题来了, 写这篇分享的时候发现无法复现的这个报错了, 笑不活了朋友们, 难道是我一开始没有安装element-plus吗....

如何实现自动引入element-plus组件

实现自动引入需要安装两个包命令如下:

npm install -D unplugin-auto-import unplugin-vue-components

vite.config.js中需要添加点配置:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import ElementPlus from 'unplugin-element-plus/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ElementPlus({
      importStyle: 'sass',
      useSource: true
    }),
    Components({
      resolvers: [
        ElementPlusResolver()
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})