首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

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

- Author -

bling_bling

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
复制js对象方法(详解)
Jul 08 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
在vue项目中,使用axios跨域处理
Mar 07 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
S2000(3) 台湾(1) 直流胆(1) 森海(1) MX500(1) SRF-S84(1) SRF-S83(1) YB400(2) PL660(1) 南麂列岛(1)
You might like
PHP的拦截器实例分析
2014/11/03 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
每天一篇javascript学习小结（属性定义方法）
2015/11/19 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
jQuery实现的小图列表，大图展示效果幻灯片示例
2016/10/25 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
python脚本监控docker容器
2016/04/27 Python
Python 备份程序代码实现
2017/03/06 Python
Python文件如何引入？详解引入Python文件步骤
2018/12/10 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
详解Python用户登录接口的方法
2019/04/17 Python
python字典一键多值实例代码分享
2019/06/14 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
佐卡伊官网：中国知名珠宝品牌
2017/02/05 全球购物
Groupon法国官方网站：特卖和网上购物高达-70%
2019/09/02 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
班主任对学生的评语
2014/04/26 职场文书
同意落户证明
2015/06/19 职场文书
话题作文之财富（600字）
2019/12/03 职场文书