Vue3.x中使用 element-plus 的各種方式

安裝element-plus

// NPM
 npm install element-plus --save

// Yarn
 yarn add element-plus

// pnpm
 pnpm install element-plus

方式一、全局引入element-plus

在main.ts 中全局注冊，這種方式引入后，在全局中使用都不需要 import 就可以直接使用

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>

方式三、經過自己封裝按需引入

1、在項目的src目錄下建一個文件夾 global，該文件夾下可以添加很多全局引入的一些設置，添加默認入口 index.ts和具體組件代碼文件register-element.ts

2、register-element.ts代碼如下

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)
  }
}

3、index.ts代碼如下

import { App } from 'vue'
import registerElement from './register-element'

export function globalRegister (app:App):void{
  app.use(registerElement)
}

4、main.ts中引入

import { globalRegister } from './global'

const app = createApp(App)
app.use(globalRegister)

大型項目中基本都是使用自己封裝的這種方式。