如何封装前端UI库 前端如何实现封装

先说点废话，本人是小前端一枚，自认为vue和ui库（element）的使用还算可以，所以自我感觉良好，觉得自己对前端工作驾驭的还不错，但是我现在遇到了压力，就是公司要封装自己的UI库，我也很高兴有这样一个机会去做公共组件，相信很多的小伙伴都是自己去写业务组件，至于UI可能更多的是直接拿过来别人的用，所以对这块不是很了解，今天我就来讲讲我做组件的过程分享给大家，喜欢的小伙伴如果有好的建议都可以交流一下，感谢！

今天要说的是封装UI库，意思很简单就是用别人做好的UI库，然后去封装一下套上自己公司的外壳。

Step1：创建基本的框架，因为我们技术用的vue随意我ui库也是用的vue来写的。创建好后就开始安装你要封装的版本，我们是安装的antdesign

Step2：创建组件，每个组件包含一个功能，功能是什么就引入对应的组件，如下图，引入完毕后就可以了，然后把这个组件暴露出去，（路径只是一个演示主要是找到对应的js和css文件）

Step3：组件都弄好了之后在同级目录下去创建一个index文件，然后把所有的组件引入index，并注册组件，在导出全部组件，下面是导出组件的案例代码。引入和注册不用多说吧，import引入，component注册，export default 导出组件

Step4：然后修改你的package.json，比如版本之类的，是否私有之类的东西，就可以发布到npm去用了，因为我也是好几个月前写的了，这些东西不能说很简单，但是真不难，有兴趣的小伙伴可以试着做做，有什么问题留言交流一下哈！