Vue3+Element?Plus按需引入(自動(dòng)導(dǎo)入)詳解
更新時(shí)間：2022年10月19日 16:39:44 作者：YanaDH
element-plus根據(jù)官網(wǎng)文檔,推薦用戶(hù)采用按需導(dǎo)入的方式進(jìn)行導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus按需引入(自動(dòng)導(dǎo)入)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
1 前言
1.1 目的
Element Plus 使用按需引入，大大縮小打包后的文件大小
1.2 最終效果
自動(dòng)生成 components.d.ts 文件，并在文件中引入 Element Plus 組件
自動(dòng)生成 components.d.ts 文件，并在文件中引入 Element Plus API
2 準(zhǔn)備工作
安裝 Element Plus
# 選擇一個(gè)你喜歡的包管理器 # NPM $ npm install element-plus --save # Yarn $ yarn add element-plus # pnpm $ pnpm install element-plus
3 按需引入
3.1 安裝插件
- 組件按需引入所需插件：unplugin-auto-import 、 unplugin-vue-components
- 圖標(biāo)按需引入所需插件：unplugin-auto-import 、 unplugin-icons
只需要安裝到開(kāi)發(fā)環(huán)境
$ pnpm i unplugin-auto-import unplugin-vue-components unplugin-icons -D
3.2 修改 vite.config.ts 文件
4 其他
4.1 ELMessage 彈框樣式未生效
需手動(dòng)導(dǎo)入 ElMessage 對(duì)應(yīng)樣式，只使用組件 API 導(dǎo)致的樣式失效問(wèn)題可嘗試相同處理方法
// 示例
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
4.2 圖標(biāo)使用
注意，-ep- 是 vite.config.ts 文件中配置的，必須保持一致
<!-- 直接使用 --> <i-ep-menu /> <!-- 嵌套使用 --> <el-icon><i-ep-menu /></el-icon>
總結(jié)
到此這篇關(guān)于Vue3+Element Plus按需引入(自動(dòng)導(dǎo)入)的文章就介紹到這了,更多相關(guān)Vue3 Element Plus按需引入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vant-Dialog 彈出框的使用小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了vue3中Hook使用以及Hook結(jié)合自定義指令方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue中el-form-item展開(kāi)項(xiàng)居中的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中el-form-item展開(kāi)項(xiàng)居中的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue2中的高復(fù)用組件通常是指那些設(shè)計(jì)得足夠通用,并能多次在項(xiàng)目中重復(fù)使用的組件,本文給大家詳細(xì)介紹了vue2創(chuàng)建高復(fù)用組件的方法示例,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
vue 使用moment獲取當(dāng)前時(shí)間及一月前的時(shí)間
開(kāi)發(fā)中會(huì)有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,本文就介紹了vue獲取當(dāng)前日期時(shí)間(moment、new?Date()),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-08-08
electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開(kāi)發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05
Vue輪播圖組件的封裝可通過(guò)封裝組件、使用插件、配置化等方式實(shí)現(xiàn)，主要包括圖片預(yù)加載、定時(shí)輪播、無(wú)限滾動(dòng)、手勢(shì)滑動(dòng)、響應(yīng)式布局等功能，實(shí)現(xiàn)方式可使用Vue的生命周期函數(shù)、自定義事件、計(jì)算屬性等技術(shù)2023-04-04
這篇文章主要介紹了詳解Axios統(tǒng)一錯(cuò)誤處理與后置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文主要介紹了Vue3里的EffectScope，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08