本次模仿elementui去简单的开发一个vue的组件库，主要是记录vue组件库的开发流程，所以省略了组件样式、功能的开发

一、准备工作

vue-cli版本：4.0.5

cli版本的不同，打包构建的方式不一样，当前版本打包库使用比较简单，无需过多的配置

二、创建项目

vue create biu-ui

为了简单点，这里我就选择默认的模板来开发组件库，并删除了根目录下的components文件夹，完成后的项目结构如下：

三、写组件

在根目录下我新建了一个package文件夹去存放我们的组件，并每个组件单独的文件夹管理，目录如图。在组件的文件夹下添加一个index.js文件用来向外暴露组件，方便引用

相同的方法，再新建一个input组件

四、注册安装组件

在packages下的index.js如图所示；这里主要的作用是向外暴露一个install()方法，供Vue.use()调用，调用时会传入Vue；在install方法中用遍历的方式结合Vue.components()去组册组件

五、使用组件库

在main.js中引入组件库并且使用vue.use()调用install()安装组件库

因为是全局引入组件库的，所以直接在组件中使用组件库中的组件

六、效果

七、打包组件库

打包库的命令，可以参考vue-cli文档，文档连接；这里大概的意思就是对packages里的组件进行库打包

打包后根目录多出一个lib的文件，这就是组件库的打包结果

八、测试打包文件

在main.js中引入组件库修改为打包后的biu-ui.common.js测试打包

到这里，一个简单的vue组件库的框架样子就搭建好了，可以按需往packages添加你需要的组件，去丰富组件库。这里只是一个本地应用的组件库，还没进行发布npm，今天就写到这里了，往后在添加如何发布到npm和实现组件按需引入，有兴趣深入的话可以去研究参考elementui组件库，这个库写得非常好

文章对您有帮助的话，不妨点个赞👍