Vue3.x中使用element-plus的各种方式详解

// NPM
 npm install element-plus --save
// Yarn
 yarn add element-plus
// pnpm
 pnpm install element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)

<template>
  <el-config-provider>
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import {}//引入相应组件的css样式和基本样式
export default defineComponent({
  components: {
    ElConfigProvider,
  }
})
</script>

import { App } from 'vue'
import 'element-plus/dist/index.css'
import { ElButton, ElForm, ElMenu } from 'element-plus' //项目中用到哪些组件就往里添加就OK了
const components = [ElButton, ElForm, ElMenu]
export default function (app:App):void{
  for (const component of components) {
    app.component(component.name, component)
  }
}

import { App } from 'vue'
import registerElement from './register-element'
export function globalRegister (app:App):void{
  app.use(registerElement)
}

import { globalRegister } from './global'
const app = createApp(App)
app.use(globalRegister)