Element-plus与其他UI库混用

原来项目用的是vue3 + vite4 + vuexy的，vuexy是国外的一个看上去很漂亮的组件库，项目在开发了一段时间后发现vuexy组件库里的表格、日期等组件很难用，但尴尬的是此时项目已经开发了一半，不方便整体更换UI库。

寻思可否把Element-plus里好用的组件筛选出来引入到项目里，让她们和正房vuexy组件们和谐共处。经过一番研究，查看Element-plus官网指南后做了一下尝试，完全可行，而且十分简单。

关键字：按需引入

一、安装Element-plus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

二、main.js 配置组件资源

import 'element-plus/theme-chalk/index.css'  // 引入组件样式
import { ElButton } from 'element-plus';   // 按需引入组件
import { Edit } from '@element-plus/icons-vue'  // 按需引入 Icon 图标

const app = createApp(App)

// 全局注册一些按需引入的组件
app.component('ElButton', ElButton)
app.component('Edit', Edit)

...

app.mount('#app')

三、vite.config.js 添加自动导入组件的配置

这样配置后，vue文件里不需要写 import ElButton from 'xxx' 引入语句。

如果已经配置过AutoImport() 和 Components()，没关系，可以配置多组。

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

四、编写代码测试：

xxx.vue

<div>
    ...
    <ElButton type="primary" icon="edit" style="margin-left:8px;">Element-UI 按钮</ElButton>
    <el-button style="margin-left:8px;">按钮2</el-button>
</div>

结果：

 可以看到小秘已经和正太和睦相处了。