vue3引入elementPlus记录

引入起来比elementUi烦人，记录一下

自动引入组件+icon全部引入

下载elementPlus和相关插件

npm install element-plus --save

npm install @element-plus/icons-vue

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

 修改vue.config.js

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

module.exports = defineConfig({
  transpileDependencies: true,
//新加内容
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
})

 main.js注册icon组件

import * as ElementIcons from '@element-plus/icons-vue'
const app=createApp(App)

for (const [key, component] of Object.entries(ElementIcons)) {
  app.component(key, component)
}

使用

<el-组件名>
</el-组件名>

<el-icon>
    <图标名 style="样式"/>
    //或者动态创建
    //<component :is="图标名" style="样式"></component>
</el-icon>