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