全局导入
下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大。
按需导入
采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面。这样开发中用到什么组件就打包什么确实很好,减少了包的体积。但是又有一个新的问题,就是每次想要使用新的组件的时候,都要去解构一下,并且挂载。操作起来非常繁琐。
有什么办法能够像使用全局引入那样只配置一次,后面要用到什么组件,都会自己按需加载呢?
vite项目演示
需要用到两个插件vite-plugin-style-import、vite-plugin-components这两个插件。
先下载npmi vite-plugin-style-import vite-plugin-components -D
然后配置vite.config.js
//vite.config.js
import styleImport from 'vite-plugin-style-import'
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
export default defineConfig({
plugins: [
vue(),
//按需导入element-plus组件
ViteComponents({
customComponentResolvers: [ElementPlusResolver()],
}),
//按需导入element-plus的css样式
styleImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: name => {
return `element-plus/lib/theme-chalk/${name}.css`
},
},
],
}),
})
**还需要再去配置main.js吗?**不需要,安装完element-plus,配置好vite.config.js就完成了。插件会自动挂载处理。
import { createApp } from 'vue'
// import ElementPlus from 'element-plus'
// import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
createApp(App).mount('#app')
这样只配置一次,每次使用组件的时候,都会自己自动导入。完美达成目标。