什么是组件

组件(Component)是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

我们要发布的是单文件组件

在npm上发布vue组件

将带有自定义组件的项目在本地完美运行，确定没有问题了，就可以准备发布啦。

我想要将这个项目中顶部的slider轮播图作为可复用组件，方便项目组员或其他人下载使用。

---

准备好vue组件，以及组件所引用的文件。下图则是我要发布的slider组件，在slider.vue中引用了dom.js，并且在slider.vue中引用该js文件的路径要修改成正确的路径。

vue组件文件 dom.js与slider.vue在相同路径下

在根目录下，执行npm init webpack，按提示填写各项参数，填写完成后生成package.json文件：

成功生成package.json文件

基础配置结束后，打开package.json文件，添加dependencies依赖：

配置详情

在文件夹根目录打开git或cmd，登录npm：

按提示完成登录

如果没有npm账号，去npm官网注册一下。

登陆成功后，使用 npm publish （这里不要使用cnpm）进行发布：

如果报错如下图，则是因为npm库中已有name为slider的包，在发布之前，最好在npm库中先查询一下在package.json中配置的name

npm库中已有名为slider的包 已有slider

使用npm库中没有的包名，则可以成功上传：

name改为1128-slider

上传成功后可在库中查找到~

上传成功

使用刚刚发布的vue组件

在vue项目中，使用npm install （我习惯用cnpm下载，但有些包有时需要翻墙使用npm下载）下载刚刚上传的组件：

下载完成

引用该组件，设置组件名，就可以使用组件啦。

使用组件

执行npm run dev，查看运行效果~

运行成功~

顺便分享好用的电脑截屏软件：GifCam

链接：https://pan.baidu.com/s/1HfKyNf91gnXpx8_br6dv6Q

提取码：o9dn

操作简单！如下图：

录屏方法

Tips：

在下载npm包的时候，我常用cnpm，cnpm下不了的时候就用npm下载，有时还需要翻墙。

使用cnpm有一些问题：

1.cnpm 的仓库只是 npm 仓库的一个拷贝，它不承担 publish 工作，所以你用 cnpm publish 命令会执行失败的。

2.不仅是 publish 会执行失败，其它的需要注册用户(npm adduser)、或者修改 package 状态等命令都无法用 cnpm