element-plus的自動導入和按需導入方式詳解
element-plus根據官網文檔,推薦用戶采用按需導入的方式進行導入。
我的項目是使用vite進行構建的,根據官網的文檔,利用unplugin-vue-components
插件進行自動按需導入。
當我們使用element的標簽時,無需再使用import對組件進行導入。
例如:
<el-button>test</el-button>
會自動引入ElButton組件。
不過當我們想要使用命令的方式創建element組件時,樣式會無法自動引入。
我們以ElMessage為例。
import { ElMessage } from 'element-plus' ElMessage.warning('warning')
如果不采用import的方式引入,會直接報錯:ElMessage沒有定義。所以這個import是省不瞭瞭。但是import瞭之後,消息彈窗是出來瞭,但是卻沒有樣式。這該怎麼辦呢?
仔細閱讀文檔,我們可以發現在手動導入裡,使用瞭一個叫unplugin-element-plus
的插件。該插件的官方文檔有詳細的使用說明,插件的主要功能如下:
import { ElButton } from 'element-plus' // ↓ ↓ ↓ ↓ ↓ ↓ import { ElButton } from 'element-plus' import 'element-plus/es/components/button/style/css'
我們可以看出,這個插件其實就是把你需要的組件的css或者sass文件自動引入進來,剛好彌補瞭上面的問題。
最後我們如下配置項目:
首先我們要安裝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的自動導入瞭。當然使用命令的組件還是需要你手動導入一下的。
補充:elementPlus圖標自動引入
首先安裝插件
npm i -D unplugin-icons unplugin-vue-components
下載圖標庫
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, }), ] })
總結
到此這篇關於element-plus自動導入和按需導入的文章就介紹到這瞭,更多相關element-plus自動導入和按需導入內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3 組件與API直接使用的方法詳解(無需import)
- vue3集成Element-plus實現按需自動引入組件的方法總結
- element-plus中如何實現按需導入與全局導入
- Vue3自動引入組件與組件庫的方法實例
- unplugin-auto-import的配置以及eslint報錯解決詳解