vue2.0+ 从插件开发到npm发布的示例代码

2020-06-13 10:16:10易采站长站整理

if (typeof window !== 'undefined' && window.Vue) {
window.PayPop = PayPop
Vue.use(PayPop)
}
export default PayPop

package.json

修改箭头中所指

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

2. 不设为false无法发布

3. 填写你自己的github托管地址(如何将代码上传github就不说了,大家可以参考Git教程—廖雪峰)

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,我们就发布成功!

6.引用

在你的项目中 npm install vue-pay-pop –save 下载我们的包

main.js


import vuePayPop from "vue-pay-pop"
vue.use(vuePayPop)

这样我们就可以在自己的vue文件中直接引用啦…

ok,那到这里我们的内容就结束了。

另外如果大家觉得有用的话,欢迎github上献上您的star,当然也可以在评论或issues中向我提出您的问题与建议,十分感谢。