elment plus 自动导入 vite webpack5

70 阅读1分钟

项目地址:gitee.com/luobf22/vue…

# NPM
//安装组件库
npm install element-plus --save
//自动引入组件库
npm install -D unplugin-vue-components unplugin-auto-import
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
  //注意:如果报错了,可以log读取以下插件,可能方法包括在default里,
  //如果包括在default里就用下面这个写法
  
  //AutoImport.default
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    
    //Components.default
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// element plus 自动按需导入
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: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

配置完毕,重新启动或者重新打包项目