一、安装插件

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

二、配置vue.config.js

说明:官网直接复制的代码会报错.apply is not a valid Plugin property,需要configureWebpack:{ }包裹一层,这个意思就是在vue.config.js中配置webpack代码需要嵌套configureWebpack,最后打包的时候会整合的。

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
}

三、在main.js中引入css样式

说明:官网推荐全部引入

import 'element-plus/dist/index.css'

四、组件中就可以正常使用了

Logo

前往低代码交流专区

更多推荐