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脚本
Dec 03 Javascript
Javascript浅谈之this
Dec 17 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
浅析Vue 生命周期
Jun 21 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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
php 读取shell管道传输过来的内容
2010/03/01 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
重写javascript中window.confirm的行为
2012/10/21 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python从单元素字典中获取key和value的实例
2018/12/31 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python 实现按对象传值
2019/12/26 Python
python实现五子棋程序
2020/04/24 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
python asyncio 协程库的使用
2021/01/21 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
构造方法和其他方法的区别
2016/04/26 面试题
一月红领巾广播稿
2014/02/11 职场文书
党建工作整改措施
2014/10/28 职场文书
2014年村官工作总结
2014/11/24 职场文书
2014年工商所工作总结
2014/12/09 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript