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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值