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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值