如何构建一个支持按需加载的Vue组件库？

本文共计1114个文字，预计阅读时间需要5分钟。

按需加载的原理是将一个组件库的不同组件到不同的文件中，根据需要加载对应的文件。具体做法如下：

- 将组件库的不同组件到不同文件中。- 按需引用需要的组件对应的文件。- 提供一个`install`方法，供`Vue.use`调用。

例如：仅想使用Element库中的组件，可以这样操作：

按需加载的原理

按需加载，本质上是把一个组件库的不同组件 拆分成不同文件 ，按照需要引用对应的文件，而该文件暴露一个 install方法 ，供Vue.use使用。 比如：我只想引用element库里的一个Button组件

import Button from 'element-ui/lib/Button.js' import Button from 'element-ui/lib/theme-chalk/Button.css' Vue.use(Button);

上面的写法比较繁琐，而且需要知道每个组件的实际路径，使用起来并不方便，所以我们还需要借助一个转换插件。

先来看看 element 是怎么做的，官方的的「快速手上」：

element使用一个了babel插件，作用就是代码转换：

import { Button } from 'components' // 转换为 var button = require('components/lib/button') require('components/lib/button/style.css')

到这我们可以知道，要搭建一个按需加载的组件库。