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


Posted in Javascript onApril 28, 2018

vue: V2.5.11

此篇尽量详细,清楚的讲解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中自行获取)

<template>
 <div class="pay-box">
  <!-- 输入框及键盘 -->
  <div :class="payPopOptions.isShow? 'pay-wrapper pay-wrapper-active' : 'pay-wrapper'">
   <div class="pay-container" v-if="status">
    <div class="pay-title">
     {{title}}
     <div class="close-pay" @click="closePay">
      <svg t="1501505446265" viewBox="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"><path data-v-7c990886="" d="M550.659 490.565l324.395-324.386c10.945-10.945 10.945-28.699 0-39.644-10.948-10.95-28.704-10.95-39.648-0.004L511.01 450.916 186.625 126.53c-10.946-10.947-28.703-10.947-39.648 0-10.946 10.95-10.946 28.703 0 39.648l324.385 324.386-324.385 324.401c-10.946 10.944-10.946 28.703 0 39.65 10.945 10.943 28.702 10.943 39.648 0L511.01 530.213l324.396 324.401c10.944 10.944 28.7 10.944 39.648 0 10.945-10.946 10.945-28.705 0-39.649L550.66 490.565z" p-id="1905"></path></svg>
     </div>
    </div>
    <div class="pay-input-wrapper">
     <div class="pay-input" v-for="(item, index) in pwdLength" :key="index">
      <input type="password" :value="val[index]" disabled>
     </div>
    </div>
    <div class="pay-keyboard-wrapper">
     <div class="pay-keyboard">
      <div class="pay-key" v-for="item in keyBoards" :key="item" @click="val2input(item)">
       {{item}}
      </div>
     </div>
     <div class="pay-keyboard-bottom">
      <div class="pay-key-bottom pay-key-blank"></div>
      <div class="pay-key-bottom pay-key-middle" @click="val2input('0')">0</div>
      <div class="pay-key-bottom pay-key-del" @click="delVal" v-html="del"></div>
     </div>
    </div>
   </div>
   <!-- 结果显示 -->
   <div class="pay-result" v-if="!status">
    <div class="loader"></div>
    <div>{{loadingTxt}}</div>
   </div>
  </div>
  <!-- 遮罩层 -->
  <div class="gray-wrapper" v-show="payPopOptions.isShow"></div>
 </div>
</template>
export default {
  name: 'vue-pay-pop',
  props: ['payPopOptions'],
  data () {
   return {
    //可选参数,支持改变
    //顶部文字
    title: this.payPopOptions.title || '请输入支付密码',
    //密码长度
    pwdLength: this.payPopOptions.pwdLength || 6,
    //底部删除按钮
    del: this.payPopOptions.del || '<svg t="1524794920212" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1048" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="30"><defs><style type="text/css"></style></defs><path d="M798.675138 191.774745c44.172035 0 80.109526 35.753295 80.109526 79.69918l0 445.373557c0 43.945885-35.93749 79.69918-80.109526 79.69918L382.443295 796.546661c-25.555026 0-49.780777-12.279674-64.804958-32.845059L154.967444 541.013801c-20.472264-28.025287-20.472264-65.680908 0-93.707219L317.638337 224.617757c15.023158-20.566408 39.249933-32.843012 64.804958-32.843012L798.675138 191.774745M798.675138 177.709401 382.443295 177.709401c-30.16502 0-58.508555 14.365172-76.240405 38.641065L143.531997 439.038268c-24.009833 32.865525-24.009833 77.378321 0 110.245893l162.670893 222.685755c17.732873 24.276916 46.075385 38.641065 76.240405 38.641065l416.231843 0c52.051493 0 94.247524-41.977044 94.247524-93.762477l0-445.373557C892.922662 219.688491 850.726631 177.709401 798.675138 177.709401L798.675138 177.709401zM475.470015 356.690772l218.792075 218.791052c10.984169 10.986215 10.984169 28.795836 0 39.780005-10.986215 10.986215-28.795836 10.986215-39.781028 0L435.69001 396.470777c-10.986215-10.984169-10.986215-28.795836 0-39.780005C446.674179 345.704556 464.485847 345.704556 475.470015 356.690772zM437.268972 578.919109l223.685525-224.042659c11.228739-11.247158 29.438473-11.247158 40.669258 0 11.230786 11.249205 11.230786 29.487591 0 40.73475L477.93823 619.654882c-11.228739 11.249205-29.438473 11.249205-40.669258 0C426.039209 608.404654 426.039209 590.167291 437.268972 578.919109z" p-id="1049" fill="#1296db"></path></svg>',
    //默认等候文字
    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中使用

<div id="app">
  <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是必传项,用来控制弹出框的显隐

其他更多参数为可选参数

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

<div id="app"></div>
<script src="/dist/vue-pay-pop.js"></script>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 #Javascript
详解Angular5 路由传参的3种方法
Apr 28 #Javascript
深入理解Vue nextTick 机制
Apr 28 #Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
Vue实现PopupWindow组件详解
Apr 28 #Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
python中__call__方法示例分析
2014/10/11 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
QML用PathView实现轮播图
2020/06/03 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
五年级学生评语
2014/04/22 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server