如何封装自定义的UI组件（实际项目开发）

1.先在根目录或者src下建一个文件夹，我命名为packages,然后在下面创建子目录，起名字的时候要见名知意，知道它这个文件夹下封装的是关于哪一类的组件即可。例图如下：

 2.在你要封装的组件的文件夹下再建一个.vue文件和.js文件，图片如上，起名字也要见名知意。

3.如图一我的例子。button.vue就是我要封装的我自己的button组件，你可以在这个里面自定义自己组件的样式，下图是我的简单示例：

4.如图一，button文件夹下的index.js，为的就是封装咋们自定义的组件，并且向外导出暴露，这样我们才能够在其他地方使用它。

 

5.到了这一步其实在main.js中注册后就可以在全局使用了，但实际开发中如果封装组件，肯定是会有许多，我们不可能一个一个全部在main.js中导入注册，这样很不利于后期维护，所以，我们在packages文件夹下创建一个.js文件，如图一，index.js ,来统一导入并导出这些组件，到时候需要在main.js中导入并注册的就只有这一个文件，代码可读性强还维护方便。

6.以上就已经完成了你自己的button组件的封装，下面只需要在你需要的文件中使用即可，我使用的是vue3的setup语法糖，所以不需要导入注册就能直接使用了。

 

 

以上就是我的分享了，欢迎大家在评论区留言讨论一起学习，我也会不定时分享自己的学习经历，遇到的问题啥的，希望大家一起共同进步！