Vue封装组件并发布到npm仓库

前言

使用Vue框架进行开发，组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用，甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用，比如iview、element-ui这一类的组件库。但是每个公司的业务场景可能不同，开发人员还是得必须封装自己得组件，如果换了一个项目，那么我们就只能复制组件代码到新的项目里面去了，这样稍显麻烦，其实我们可以将组建上传到npm仓库，要用的时候可以直接从npm安装使用。

总结下来有两点好处：

• 方面使用，任何项目无缝衔接。

• 可作为开源项目，积累经验。

1.环境准备 

因为我们此次封装的是Vue组件，所以我们直接在Vue脚手架项目里面进行封装即可。

（1）初始化Vue项目

vue create my-app

（2）运行项目

npm run serve

2.组件封装 

2.1新建package文件夹

因为我们可能会封装多个组件，所以在src下面新建一个package文件夹用来存放所有需要上传的组件。

这里我们打算封装两个组件：zq-button、zq-custom，所以在package文件夹下面分别新建了存放两个组件代码的文件夹。

2.2编写组件代码

这里我们就以zq-button组件为例，任意编写一点代码，代码如下：