首页
所有分类
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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)
Jul 22 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
mpvue 项目初始化及实现授权登录的实现方法
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
UNIX面试题(27) Servlet面试题(20) Delphi面试题(13) Ruby面试题(15) J2EE面试题(19) MySQL面试题(19) EJB面试题(46) 软件工程师面试题(40) Javascript面试题(44) PYTHON面试题(27)
You might like
PHP数组对比函数，存在交集则返回真，否则返回假
2011/02/03 PHP
php抽奖概率算法（刮刮卡，大转盘）
2020/04/17 PHP
PHP实现简单登录界面
2019/10/23 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python读取视频的两种方法（imageio和cv2）
2018/04/15 Python
python得到电脑的开机时间方法
2018/10/15 Python
python Tkinter版学生管理系统
2019/02/20 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python dict如何定义
2020/09/02 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
馥绿德雅美国官方网站：Rene Furterer头皮护理专家
2019/05/01 全球购物
Geekbuying波兰：购买中国电子产品
2019/10/20 全球购物
什么是重载？CTS、CLS和CLR分别做何解释
2012/05/06 面试题
档案室主任岗位职责
2014/02/12 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
经销商年会策划方案
2014/05/29 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
pandas数值排序的实现实例
2021/07/25 Python
redis中lua脚本使用教程
2021/11/01 Redis
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
TypeScript 内置高级类型编程示例
2022/09/23 Javascript