什么是组件
组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
我们要发布的是单文件组件
在npm上发布vue组件
将带有自定义组件的项目在本地完美运行,确定没有问题了,就可以准备发布啦。
我想要将这个项目中顶部的slider轮播图作为可复用组件,方便项目组员或其他人下载使用。
准备好vue组件,以及组件所引用的文件。下图则是我要发布的slider组件,在slider.vue中引用了dom.js,并且在slider.vue中引用该js文件的路径要修改成正确的路径。
在根目录下,执行npm init webpack,按提示填写各项参数,填写完成后生成package.json文件:
基础配置结束后,打开package.json文件,添加dependencies依赖:
在文件夹根目录打开git或cmd,登录npm:
如果没有npm账号,去npm官网注册一下。
登陆成功后,使用 npm publish (这里不要使用cnpm)进行发布:
如果报错如下图,则是因为npm库中已有name为slider的包,在发布之前,最好在npm库中先查询一下在package.json中配置的name
使用npm库中没有的包名,则可以成功上传:
上传成功后可在库中查找到~
使用刚刚发布的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