用npm发布一个包的教程并编写一个vue的插件发布
为什么需要发布npm包？
现在的vue项目中我们会用到各式各样的插件以及想定制一些自己功能插件，要是各个项目都需要使用到，我们可以使用npm发布包，安装包的方式，去引入到我们的项目中，也可以供其他人使用，。当然你也可以说，把它封装在一个JS文件里面，然后使用require('./test.js')给引入进来，那也行。但是我们可以用多种方法实现，接下来写下发布包的流程
一.准备工作
注册一个npm账号
注册地址：https://www.npmjs.com/
二、初始化要封装的包
1、选择一个文件夹，然后用命令行cd进去
npm init
接下来就是一长串表单：
name：填写你这个包的名字，默认是你这个文件夹的名字。不过这里要着重说一下，最好先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入npm install 你要取的名字，如果报错，那么很好，npm上没有跟你同名的包，你可以放心大胆地把包发布出去。如果成功下载下来了。。。那么很不幸，改名字吧。。。
version：你这个包的版本，默认是1.0.0
description：这个用一句话描述你的包是干嘛用的，比如我就直接：‘watermark for dom’
entry point：入口文件，默认是Index.js，你也可以自己填写你自己的文件名
test command：测试命令，这个直接回车就好了，因为目前还不需要这个。
git repository：这个是git仓库地址，如果你的包是先放到github上或者其他git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录作为这一项的默认值。如果没有的话，直接回车继续。
keyword：这个是一个重点，这个关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。我这个包嘛，第一是在express下工作的，然后又是一个插件plugin，然后又是一个注册路由route用的，而这个路由又是基于文件目录dir，所以很好就得出我的包的索引关键字。
author：写你的账号或者你的github账号吧
license：这个直接回车，开源文件来着。。。
填好之后生成一个package.json的文件，如下图所示：
文章图片
文章图片
三、编写一个vue的插件
1.新建一个index.js和testNpmPackage.vue文件,如下图所示
文章图片
2.index.js文件代码
vue官网有给出明确的文档 vue插件开发 ,我们需要有一个公开方法 install,里面来包含我们要处理的业务。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象，当我们用到视图层的东西的时候，就需要用到testNpmPackage.vue文件，可以引入进来，在判断不是global 情况下 自动安装，当然也要导出这个插件，如下图
文章图片
我们也可以向插件传入属性和方法，如下图
文章图片
【用npm发布一个包的教程并编写一个vue的插件发布】四：发布一个插件
npm命令登录
接下来就是：用npm命令登陆一下：
npm login
登录的是自己注册的用户名和密码。
PS：或者使用添加npm用户
npm adduser
npm发布到官方网上
然后，在你的目录下使用npm publish
npm publish
PS :每一次发布新的一版，version版本要改变，不然npm会给我报错。一般情况下，一旦你要修改你已经发布后的代码，然后又要执行发布操作，务必到package.json里面，把version改一下，比如从1.0.0改为1.0.1，然后在执行npm publish，这样就可以成功发布了。
五、看一下发布的包
登录自己的npm官方，就可以看到自己发布的包
文章图片
六、使用自己写的vue的插件
1.首先用npm install安装npm install npmpackagebaiyangbeibei，在package.json里就会有对应的安装版本
文章图片
2.引入到项目中，就像引入vue-router一样，如下图
文章图片
3.在项目中使用
文章图片
七、更新npm包
务必到package.json里面，把version改一下，比如从1.0.0改为1.0.1，然后在执行npm publish，这样就可以成功更新发布了。
也可以删除指定的版本 npm unpublish 包名@版本号
也可以删除整个包 npm unpublish 包名 --force删除之前会有警告提示
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- JS中的各种宽高度定义及其应用
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- 涉毒患者(新诗)
- 参保人员因患病来不及到指定的医疗机构就医，能否报销医疗费用（）
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。