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

网友投稿 321 2023-02-07


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

vue: V2.5.11

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

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

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

1. 初始化项目

vue init webpack-simple vue-pay-keyboard

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

整理完后项目目录

2.编写插件

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

{{title}}

{{item}}

export default {

name: 'vue-pay-pop',

props: ['payPopOptions'],

data () {

return {

//可选参数,支持改变

//顶部文字

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中使用

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.http://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

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中向我提出您的问题与建议,十分感谢。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:详解ajax的data参数错误导致页面崩溃
下一篇:详解Angular5路由传值方式及其相关问题
相关文章

 发表评论

暂时没有评论,来抢沙发吧~