阿坝州网站建设公司

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

vue： V2.5.11

我们注重客户提出的每个要求，我们充分考虑每一个细节，我们积极的做好网站设计制作、做网站服务，我们努力开拓更好的视野，通过不懈的努力，创新互联赢得了业内的良好声誉，这一切，也不断的激励着我们更好的服务客户。 主要业务：网站建设,网站制作,网站设计,小程序开发,网站开发,技术开发实力，DIV+CSS，PHP及ASP，ASP.Net，SQL数据库的技术开发工程师。

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

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

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

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

1. 初始化项目

vue init webpack-simple vue-pay-keyboard

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

整理完后项目目录

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

2.编写插件

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

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.isShow = true;
  }
 }
}

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

其他更多参数为可选参数

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

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

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

修改箭头中所指

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

2. 不设为false无法发布

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

webpack.config.js

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

修改entry和filename

index.html

dist文件大家在命令行中输入npm run build就会自定生成

5.发布npm

你需要去npm官网注册一个npm帐号

注册好后

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

输入你的用户名，密码，邮箱（密码是不显示的）

成功登录后我们在输入

vue2.0+ 从插件开发到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中向我提出您的问题与建议，十分感谢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


文章名称：vue2.0+从插件开发到npm发布的示例代码
文章起源：http://azwzsj.com/article/jeddps.html

其他资讯