element-plus的自動(dòng)導(dǎo)入和按需導(dǎo)入方式詳解
element-plus根據(jù)官網(wǎng)文檔，推薦用戶采用按需導(dǎo)入的方式進(jìn)行導(dǎo)入。
我的項(xiàng)目是使用vite進(jìn)行構(gòu)建的，根據(jù)官網(wǎng)的文檔，利用unplugin-vue-components插件進(jìn)行自動(dòng)按需導(dǎo)入。
當(dāng)我們使用element的標(biāo)簽時(shí)，無需再使用import對(duì)組件進(jìn)行導(dǎo)入。
例如：
<el-button>test</el-button>
會(huì)自動(dòng)引入ElButton組件。
不過當(dāng)我們想要使用命令的方式創(chuàng)建element組件時(shí)，樣式會(huì)無法自動(dòng)引入。
我們以ElMessage為例。
import { ElMessage } from 'element-plus'
ElMessage.warning('warning')
如果不采用import的方式引入，會(huì)直接報(bào)錯(cuò)：ElMessage沒有定義。所以這個(gè)import是省不了了。但是import了之后，消息彈窗是出來了，但是卻沒有樣式。這該怎么辦呢？
仔細(xì)閱讀文檔，我們可以發(fā)現(xiàn)在手動(dòng)導(dǎo)入里，使用了一個(gè)叫unplugin-element-plus的插件。該插件的官方文檔有詳細(xì)的使用說明，插件的主要功能如下：
import { ElButton } from 'element-plus'
// ↓ ↓ ↓ ↓ ↓ ↓
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'
我們可以看出，這個(gè)插件其實(shí)就是把你需要的組件的css或者sass文件自動(dòng)引入進(jìn)來，剛好彌補(bǔ)了上面的問題。
最后我們?nèi)缦屡渲庙?xiàng)目：
首先我們要安裝unplugin-vue-components和unplugin-element-plus。
npm i unplugin-vue-components unplugin-element-plus -D
之后配置一下vite.config.js文件。
import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
ElementPlus({
importStyle: 'sass',
useSource: true
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
})
這樣配置之后，我們就可以享用element-plus的自動(dòng)導(dǎo)入了。當(dāng)然使用命令的組件還是需要你手動(dòng)導(dǎo)入一下的。
補(bǔ)充：elementPlus圖標(biāo)自動(dòng)引入
首先安裝插件
npm i -D unplugin-icons unplugin-vue-components
下載圖標(biāo)庫(kù)
npm i @element-plus/icons-vue
配置vite.config.js
import path from 'path'
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import {
ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({
esolve: {
alias: {
'@': pathSrc,
},
},
plugins: [
vue(),
AutoImport({
resolvers: [
ElementPlusResolver(),
IconsResolver({
prefix: 'Icon',
}),
],
dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
}),
Components({
resolvers: [
ElementPlusResolver(),
IconsResolver({
enabledCollections: ['ep'],
})
],
dts: path.resolve(pathSrc, 'components.d.ts'),
}),
Icons({
autoInstall: true,
}),
]
})總結(jié)
到此這篇關(guān)于element-plus自動(dòng)導(dǎo)入和按需導(dǎo)入的文章就介紹到這了,更多相關(guān)element-plus自動(dòng)導(dǎo)入和按需導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中可編輯樹狀表格的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div拖拽互換位置的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件，這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下2023-01-01
Vue3封裝hooks實(shí)現(xiàn)實(shí)時(shí)獲取麥克風(fēng)音量
這篇文章主要為大家詳細(xì)介紹了Vue3如何通過封裝一個(gè)hooks實(shí)現(xiàn)實(shí)時(shí)獲取麥克風(fēng)音量功能,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2024-03-03
基于element-ui表格的二次封裝實(shí)現(xiàn)
本文主要介紹了基于element-ui表格的二次封裝實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法
actions用來處理mutations中的異步操作,觸發(fā)mutations中的函數(shù),下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue中this.$refs有值,但無法獲取ref的值問題及解決
這篇文章主要介紹了vue中this.$refs有值,但無法獲取ref的值問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果
echarts在前端開發(fā)中實(shí)屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果,感興趣的可以了解下2023-10-10
解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題
這篇文章主要介紹了解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07