Element Plus按需引入配置

 由于使用中太多坑,本人暂时放弃使用

碰见的坑 例如

#图标要加上 i-ep

<i-ep-House/>

# 在axios中使用加载和弹窗无效

开始使用配置正题

组件配置官网:快速开始 | Element Plus (gitee.io)

图标配置官网:Icon 图标 | Element Plus (gitee.io)

首先按需引入要安装如下 

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

npm install -D unplugin-icons

然后vue项目中配置vue.config.js如下

const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

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(),
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon'
          })
        ]
      }),
      Components({
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep']
          }),
          ElementPlusResolver()
        ]
      }),
      Icons({
        autoInstall: true
      })
    ]
  }
}

以上就已经配置完成了!!!

猜你喜欢

转载自blog.csdn.net/weirdo_world/article/details/132453270
今日推荐