Vue3+Element?Plus按需引入(自動導(dǎo)入)詳解
更新時間：2022年10月19日 16:39:44 作者：YanaDH
element-plus根據(jù)官網(wǎng)文檔,推薦用戶采用按需導(dǎo)入的方式進行導(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)文章
下面小編就為大家?guī)硪黄猇ue自定義事件(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
利用vuex-persistedstate將vuex本地存儲實現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+Echarts實現(xiàn)繪制多設(shè)備狀態(tài)甘特圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合Echarts實現(xiàn)繪制多設(shè)備狀態(tài)甘特圖,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
詳解vue中router-link標(biāo)簽所必備了解的屬性
這篇文章主要介紹了vue中router-link標(biāo)簽所必備了解的屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
最近項目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過js手動控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue3使用vant檢索組件van-search遇到的問題小結(jié)
當(dāng)清空按鈕與檢索按鈕同時居右時,點擊clear清空按鈕事件時會同時觸發(fā)click-right-icon事件,這個時候容易觸發(fā)一系列問題,小編小編給大家分享Vue3使用vant檢索組件van-search遇到的問題小結(jié),感興趣的朋友一起看看吧2024-02-02
在vue中創(chuàng)建mapbox地圖，地圖只顯示一般，查看瀏覽器開發(fā)者工具，發(fā)現(xiàn)將canvas.mapboxgl-canvas 的position:absolute去掉就解決了，今天小編通過本文給大家分享詳細(xì)過程，感興趣的朋友跟隨小編一起看看吧2023-07-07
最近找到幾個好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue 組件注冊的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue 組件的相關(guān)知識，感興趣的朋友可以了解下2020-11-11
Vue ECharts直角坐標(biāo)系配置詳細(xì)講解
數(shù)據(jù)的重要性我們大家都知道，就算再小的項目中都可能使用幾個圖表展示，我最近在做項目的過程中也是需要用到圖表，最后選擇了echarts圖表庫2022-12-12