快捷導(dǎo)航

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)

方式二、單個組件中使用

直接在該組件中引入相應(yīng)的組件，進行使用，這種在項目中一般比較少用到

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

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import {}//引入相應(yīng)組件的css樣式和基本樣式
export default defineComponent({
? components: {
? ? ElConfigProvider,
? }
})
</script>

方式三、經(jīng)過自己封裝按需引入

1.在項目的src目錄下建一個文件夾 global

該文件夾下可以添加很多全局引入的一些設(shè)置，添加默認入口 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)

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

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

您可能感興趣的文章:

相關(guān)文章

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