Element-Plus是一款基于Vue.js開發的一套非常優秀的UI組件庫,它提供了豐富的組件和功能,但有時候我們并不需要在項目中引入所有的組件,這時就需要進行按需加載來減少打包體積。
Element-Plus提供了按需加載的方式,可以通過babel-plugin-component插件來實現。步驟如下:
npm install babel-plugin-component -D
// babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-plus',
styleLibraryName: 'theme-chalk'
}
]
]
}
import { ElButton, ElInput } from 'element-plus'
export default {
components: {
ElButton,
ElInput
}
}
這樣就可以實現按需加載Element-Plus的組件了,只會將使用到的組件打包到最終的項目中,減少了打包體積。