组件封装

<template>
  <el-config-provider v-bind="$attrs" :locale="configZh">
    <slot></slot>
  </el-config-provider>
</template>

<script>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

export default {
  name: "ConfigProvider",
  data() {
    return {
      configZh: zhCn,
    }
  }
}
</script>

<style scoped>

</style>

用Mixin的方式注册

import UploadImg from './components/self/UploadImg'
import Dialog from './components/element-ui/Dialog'
import Button from './components/element-ui/Button'
import SwitchSelf from './components/self/SwitchSelf'
import Tabself from './components/self/TabSelf'
import Input from './components/element-ui/Input'
import Checkbox from "./components/element-ui/Checkbox";
import Form from './components/element-ui/Form'
import CheckboxGroup from './components/element-ui/CheckboxGroup'
import Pagination from './components/element-ui/Pagination'
import ConfigProvider from "./components/element-ui/ConfigProvider";

export default {
    components: {
        UploadImg,
        Dialog,
        Button,
        SwitchSelf,
        Tabself,
        Input,
        Checkbox,
        Form,
        CheckboxGroup,
        Pagination,
        ConfigProvider
    }
}

main.js中全局使用mixin

import {createApp} from 'vue'
import App from './App.vue'
import routes from "@/routes";
import {store} from '@/vuex'
import qs from 'qs'
import utils from './components/elementUtils/lib'
// --- element-plus ---
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// --- utils ---
import iconMixin from "@/components/iconMixin";
import './styles/flax.css'

const app = createApp(App)
app.config.globalProperties.$store = store
app.config.globalProperties.$qs = qs
app.mixin(iconMixin)
app.mixin(utils)
app.use(ElementPlus)
app.use(routes)
app.use(store)

// app.use(ElementPlus)
app.mount('#app')

app.vue中全局使用配置组件

<template>
  <div id="app">
    <ConfigProvider>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </ConfigProvider>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
}
</style>