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中自行获取)

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

其他更多参数为可选参数

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

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

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

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

您可能感兴趣的文章:

  • 用vue封装插件并发布到npm的方法步骤
  • vue封装第三方插件并发布到npm的方法
(0)

相关推荐

  • vue封装第三方插件并发布到npm的方法

    前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心. gitment gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件.vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用 项目初始化 封装vue的插件用

  • 用vue封装插件并发布到npm的方法步骤

    一.基于vue的国家区号列表 vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号. 全球区号列表 1.1 初始化组件 用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来. vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev 1.2 根据自己的需求,实现具体功能,我的主要功能写在v

  • 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

  • vue2.0 better-scroll 实现移动端滑动的示例代码

    写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏的高度进行比较,获得其 index 值 4)左侧的分类中,使与 index 相应

  • vue2.0移动端滑动事件vue-touch的实例代码

    Vue-touch的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入: import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 用法如下: //html代码

  • vue2.0中goods选购栏滚动算法的实现代码

    不多说,直接代码,以便以后重复利用: <script type="text/ecmascript-6"> import BScroll from 'better-scroll'; const ERR_OK = 0; export default { props: { sell: { type: Object } }, data() { return { goods: [], listHeight: [], scrollY: 0 }; }, computed: { curre

  • vue2.0实现前端星星评分功能组件实例代码

    下面给大家分享vue 2.0实现星星评分组件,代码很简单,一起看看吧! 废话不多说了,直接给大家贴代码了,具体代码如下所示: <template id="pingJia"> <div> <ul> <li :class="{li1:1,bg1:index%2}" v-for="(value,index) in list"><span class="stu_span1">

  • vue2.0 兄弟组件(平级)通讯的实现代码

    1.前戏吧 先看看前两篇文章: 父组件传给子组件 子组件传给父组件 看图 看图 看图!!! 个人理解: 这明显是生活中弟弟打电话哥哥一样,双方都需要手机,需要信号发射塔. 弟弟 => A组件 哥哥 => B组件 弟弟的手机 => $emit发送数据 哥哥的手机 => $on监听并接收数据 信号发射塔 => 中间事件线 App.vue => 不用说都知道是地球 2. 代码 2.1.在src/asstes下新建中间事件线ligature .js (注意后缀.js) impo

  • python+opencv3.4.0 实现HOG+SVM行人检测的示例代码

    参照opencv官网例程写了一个基于python的行人检测程序,实现了和自带检测器基本一致的检测效果. 网址 :https://docs.opencv.org/3.4.0/d5/d77/train_HOG_8cpp-example.html opencv版本:3.4.0 训练集和opencv官方用了同一个,可以从http://pascal.inrialpes.fr/data/human/下载,在网页的最下方"here(970MB处)",用迅雷下载比较快(500kB/s).训练集文件比较

  • 基于vue2.0+vuex+localStorage开发的本地记事本示例

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件

  • vue2.0之多页面的开发的示例

    我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是.因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面.但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,也就是webpack就是重新配置才可以.本文将详细讲webpack的配置. vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是

  • Android8.0适配前台定位服务service的示例代码

    从Android 8.0开始系统为实现降低功耗,对后台应用获取用户位置信息频率进行了限制,每小时只允许更新几次位置信息,详细信息请参考官方说明.按照官方指引,如果要提高位置更新频率,需要后台应用提供一个前台服务通知告知. 所以原来的单单使用locationManager获得当前位置在后台情况下无法使用了.于是打算使用一个前台服务,当app在后台时也能获得当前位置. 查了几篇博客说前台服务需要在service的onStartCommand方法中调用startForeground(int, Noti

随机推荐