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

<div> <div @click="showPayPop">点击弹出支付框</div> <vue-pay-pop ref="pay" :payPopOptions="payPopOptions" @inputDown="inputDown"></vue-pay-pop> </div>

import vuePayPop from './lib/vue-pay-pop' export default { name: 'app', data () { return { payPopOptions: { isShow: false }, } }, components: { vuePayPop }, methods: { inputDown(val) { //模拟检查数据 setTimeout(() => { if (val == '111111') { this.$refs.pay.$payStatus(true) } else { this.$refs.pay.$payStatus(false) } }, 1000) }, showPayPop() { this.payPopOptions.isShow = true; } } }

其中payPopOptions中isShow是必传项，用来控制弹出框的显隐

其他更多参数为可选参数

4.更改配置文件

ok，现在我们去更改配置文件，为我们的发布做准备

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

修改箭头中所指

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

2. 不设为false无法发布

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

webpack.config.js

修改entry和filename

index.html

<div></div> <script src="https://www.jb51.net/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中向我提出您的问题与建议，十分感谢。