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 添加自动导入组件的配置

自动导入可以省很多代码，需要事先安装以下两个库

unplugin-auto-import

unplugin-vue-components

vite.config.js做如下配置：

// vite.config.js
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()],
    }),
  ],
})

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

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

 

 四、添加语言支持

Element-plus默认语言为英文，有的组件比如 date-picker 的显示星期、日期格式等不太友好，需要使用中文语言库

在main.js添加：

import { ElConfigProvider } from 'element-plus' // 使用配置提供器设置Element-plus的语言为中文(在App.vue中使用此组件)
const app = createApp(App)
...
// 全局注册一些按需引入的组件
app.component('ElConfigProvider', ElConfigProvider)

在App.vue中：

1. 引入语言配置文件

import eleLang from 'element-plus/es/locale/lang/zh-cn'// Element-plus组件库中文语言支持

2. 将  <RouterView/> 外层套上<ElConfigProvider>包裹起来：

<ElConfigProvider :locale="eleLang">
      <RouterView />
      <ScrollToTop />
</ElConfigProvider>

 

 

 

---

 

大功告成

编写代码测试：

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>

 

结果：

 可以看到小秘已经和正太互称姐妹，一家人和谐的在一起了。

 

五、自定义颜色主题（参考自官网）

1. 创建自定义主题色sass文件，比如放到src目录下，叫 elementPlusTheme.scss

文件中重写ElementPlus的主题色变量值

// elementPlusTheme.scss
// 覆盖原库样式，自定义主题色
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);
// 引入原库样式，必须在上方自定义主题色配置之后，否则无效果
@use "element-plus/theme-chalk/src/index.scss" as *;

注意，如果main.js里已经全局引入了样式，会覆盖掉上面的配置，会没有效果。必须删掉main.js里的引入，放到此文件底部。

 

2. 在vite.config.js中，plugins配置下增加：

   plugins: [
        ...,
        css: {
            preprocessorOptions: {
                scss: {
                    // ElementPlus 自定义主题配置
                    additionalData: `@use "~/elementPlusTheme.scss" as *;`,
                }
            }
        },
   ]

 

效果：