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對組件進(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)庫
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
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ì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法
actions用來處理mutations中的異步操作,觸發(fā)mutations中的函數(shù),下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10vue中this.$refs有值,但無法獲取ref的值問題及解決
這篇文章主要介紹了vue中this.$refs有值,但無法獲取ref的值問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue使用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à)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07