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

这篇文章主要介绍了Vue3.x中使用element-plus的各种方式详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

目录

• 安装element-plus 
• 方式一、全局引入element-plus
• 方式二、单个组件中使用
• 方式三、经过自己封装按需引入
• 1.在项目的src目录下建一个文件夹 global
• 2.register-element.ts代码如下
• 3.index.ts代码如下
• 4.main.ts中引入

安装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)

大型项目中基本都是使用自己封装的这种方式。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• element-plus按需引入后ElMessage与ElLoading在页面中的使用
• Vue3实现Message消息组件示例
• vue3.0中使用element的完整步骤
• vue3中实现使用element-plus调用message