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

更新時間：2022年04月23日 15:03:06 作者：清和時光

這篇文章主要介紹了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)

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于Vue3實現一個簡單的雪花漂浮效果
隨著冬季的到來,許多網站和應用程序都會添加一些節(jié)日氛圍的元素,比如雪花飄落的效果,本文將教你如何在 Vue 3 中實現一個簡單的雪花漂浮效果,為你的網頁增添一絲冬日的浪漫,感興趣的小伙伴跟著小編一起來看看吧
2025-01-01
手把手教你Vue3實現路由跳轉
Vue Router是Vue.js的官方路由器,它與Vue.js核心深度集成,使使用Vue.js構建單頁應用程序變得輕而易舉,下面這篇文章主要給大家介紹了關于Vue3實現路由跳轉的相關資料,需要的朋友可以參考下
2022-08-08
記一次vue跨域的解決
這篇文章主要介紹了vue跨域的解決方法，幫助大家解決前端跨域問題，感興趣的朋友可以參考下
2020-10-10
詳解nginx配置vue h5 history去除#號
這篇文章主要介紹了詳解nginx配置vue h5 history去除#號，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-11-11
詳解Vue.js中.native修飾符
這篇文章主要介紹了Vue.js中.native修飾符,給普通的HTML標簽監(jiān)聽一個事件，之后添加 .native 修飾符是不會起作用的。需要的朋友可以參考下
2018-04-04
VUE和Antv G6實現在線拓撲圖編輯操作
這篇文章主要介紹了VUE和Antv G6實現在線拓撲圖編輯操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue3中插槽(slot)用法匯總(推薦)
這篇文章主要介紹了Vue3中插槽(slot)用法匯總,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
全面總結Vue3.0的多種偵聽方式
Vue提供了一種更通用的方式來觀察和響應當前活動的實例上的數據變動:偵聽屬性,下面這篇文章主要給大家介紹了關于Vue3.0多種偵聽方式的相關資料,需要的朋友可以參考下
2021-10-10
element動態(tài)路由面包屑的實現示例
本文主要介紹了element動態(tài)路由面包屑的實現示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
element中使用formdata進行上傳文件的方法
本文主要介紹了elementUI中使用formdata進行上傳文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-03-03