vue3 element-plus按需引用组件

下载element-plus和对应插件

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

配置vus.config.js文件

没有这个文件的话可以在项目下直接创建，将一下内容复制粘贴进去

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()],
        }),
    ],
}

}

和官网element-plus提供的webpack代码不同的是，vue3 配置没有plugins这个，必须包含在configureWebpack中才可以。

验证

验证标准，引用配置完成后，在页面使用相关组件，可以整成使用。

OK！

可能会出的错误

1. Error: Cannot find module ‘vue-loader-v16/package.json‘
   解决方法：删除node_model ，并将项目的package.json和package_lock.json 文件，然后在终端执行“npm – install”或“cnpm --install”重新下载项目的相关依赖。