github上发布插件 并且在项目内引用自己发布的插件 npm

在做项目的过程中，经常发现别人的插件里功能不齐全或者没有自己想要的功能，想添加一点自己特别需要的功能，在这里不多做怎么去写一个插件，自己也是看网上的资料，在这里只是记录一下，发布一个插件，并且去使用它的步骤，如果可以帮助到大家，也是极好的。

 

1.初始化项目

vue init webpack-simple XXXXX(此处为插件名)
使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容

这是插件项目。当然您也可以复制别人的插件项目，在代码中添加您自己需要的功能

2.编写插件

（略 如题，只是记录如何发布插件）

3.尝试使用

插件编写完成 可以本地app.vue先运行一下 是否效果正常 再调整

4.更改配置文件

现在就是核心部分了 上面或多或少还是与怎样去生成一个插件相关的

在index.js内

import vuePayPop from './vue-pay-pop.vue'
const PayPop = {
  install(Vue, options) {
    Vue.component(vuePayPop.name, vuePayPop)
  }
}
if (typeof window !== 'undefined' && window.Vue) {
  window.PayPop = PayPop
  Vue.use(PayPop)
}
export default PayPop
package.json

version后添加版本号，可自定

private值设为false（必须）

在repository内的url字段 填上该项目的github地址，可以把项目传到自己的GitHub上

修改箭头中所指

1. 你的插件版本号，以后每次上传npm都需要更改

2. 不设为false无法发布

3. 填写你自己的github托管地址

webpack.config.js

修改entry和filename

index.html

<div id="app"></div>
<script src="/dist/vue-pay-pop.js"></script>
（dist文件大家在命令行中输入npm run build就会自定生成）.
5.发布npm

你需要去npm官网注册一个npm帐号

注册好后

进入到项目目录下

输入你的用户名，密码，邮箱

成功登录后我们在输入

ok，我们就发布成功！

——————————————————————————————————————————————————————

发布npm可能的遇到问题 所以完整添加一遍

D:\cj\vue\vue-table-test>npm adduser
Username: XXXXXXX
Password:
Email: (this IS public) XXXXXX@XXX.com
Logged in as XXXXXX on https://registry.npm.taobao.org/.
 
D:\cj\vue\vue-table-test>npm whoami（该命令查看当前npm账号）
XXXXXXX（对应显示账号）
D:\cj\vue\vue-table-test>npm login
Username: (XXXXXXX)
Password: (<default hidden>)
Email: (this IS public) (XXXXXX@XXX.com)
Logged in as XXXXXXX on https://registry.npm.taobao.org/.
 
D:\cj\vue\vue-table-test>npm publish
6.引用

在你的项目中 npm install vue-pay-pop --save 

main.js

import vuePayPop from "vue-pay-pop"
vue.use(vuePayPop)
这样我们就可以在自己的vue文件中直接引用啦...

本项目的插件 也是在别人的基础上 略微修改 所以在插件编写上没有很多说明。

当然 本文的正题是 发布 二字，是如何发布的一个过程！

转载：https://blog.csdn.net/chenjing0823/article/details/82492855