本次模仿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
组件库,这个库写得非常好
文章对您有帮助的话,不妨点个赞
👍
相关链接: