频道导航

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

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了vue2.0+ 从插件开发到npm发布的示例代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

vue： V2.5.11

此篇尽量详细，清楚的讲解vue插件的开发到npm的发布，想想将你自己做的东西展示给广大“网民”，心里还是有点小激动的...…^_^

先上一下插件效果图------github传送门

下面我们就来说说详细做法：

1. 初始化项目

使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容

整理完后项目目录

2.编写插件

vue-pay-pop (源码大家可到github中自行获取)

Box">

Box="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1904" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" class="icon">

支持改变 //顶部文字 title: this.payPopOptions.title || '请输入支付密码',//密码长度 pwdLength: this.payPopOptions.pwdLength || 6,//底部删除按钮 del: this.payPopOptions.del || '',//默认等候文字 loadingTxt: this.payPopOptions.loadingTxt || '请稍候...',//默认等候时间 loadingTime: this.payPopOptions.loadingTime || 1000,//显示结果后，多久重回默认 resultTime: this.payPopOptions.resultTime || 1000,//成功文字 successTxt: this.payPopOptions.successTxt || '支付成功',//失败文字 failTxt: this.payPopOptions.failTxt || '支付失败',//默认参数，无法改变 //键盘数字(1~9) keyBoards: ['1','2','3','4','5','6','7','8','9'],//键入的值 val: [],//默认输入框与等待层是否显示 status: true } },methods: { val2input(item) { this.val.push(item) if (this.val.length == this.pwdLength) { //打开等待层 this.status = false //输入完毕后将值传递给父组件 this.$emit('inputDown',this.val.join('')) //清空数据 this.val = [] } },delVal () { if (this.val.length > 0) this.val.pop() },closePay () { this.payPopOptions.isShow = false; },$payStatus(flag = false) { const that = this //模拟等候feel setTimeout(() => { if (flag) { //成功 this.loadingTxt = this.successTxt //关闭输入层，重置等待语 setTimeout(function() { that.payPopOptions.isShow = !flag that.status = true that.loadingTxt = that.payPopOptions.loadingTxt || '请稍候...' },this.resultTime) } else { //失败 this.loadingTxt = this.failTxt //重新打开输入层，重置等待语 setTimeout(function() { that.status = true that.loadingTxt = that.payPopOptions.loadingTxt || '请稍候...' },this.resultTime) } },this.loadingTime) } } }

基本源码都在这里了，实现方法比较简单，这里就不多过介绍了...

3.尝试使用

我们先尝试在本地app.vue中使用

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

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