当前位置：Gxlcms > JavaScript > vue2.0+ 从插件开发到npm发布的示例代码

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

时间：2021-07-01 10:21:17 帮助过：12人阅读

vue： V2.5.11

此篇尽量详细，清楚的讲解vue插件的开发到npm的发布，想想将你自己做的东西展示给广大“网民”，心里还是有点小激动的...…^_^

先上一下插件效果图------github传送门

下面我们就来说说详细做法：

1. 初始化项目

  1. vue init webpack-simple vue-pay-keyboard

使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容

整理完后项目目录

2.编写插件

vue-pay-pop (源码大家可到github中自行获取)

  1. <template>
  2.  <div class="pay-box">
  3.   <!-- 输入框及键盘 -->
  4.   <div :class="payPopOptions.isShow? 'pay-wrapper pay-wrapper-active' : 'pay-wrapper'">
  5.    <div class="pay-container" v-if="status">
  6.     <div class="pay-title">
  7.      {{title}}
  8.      <div class="close-pay" @click="closePay">
  9.       <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>
  10.      </div>
  11.     </div>
  12.     <div class="pay-input-wrapper">
  13.      <div class="pay-input" v-for="(item, index) in pwdLength" :key="index">
  14.       <input type="password" :value="val[index]" disabled>
  15.      </div>
  16.     </div>
  17.     <div class="pay-keyboard-wrapper">
  18.      <div class="pay-keyboard">
  19.       <div class="pay-key" v-for="item in keyBoards" :key="item" @click="val2input(item)">
  20.        {{item}}
  21.       </div>
  22.      </div>
  23.      <div class="pay-keyboard-bottom">
  24.       <div class="pay-key-bottom pay-key-blank"></div>
  25.       <div class="pay-key-bottom pay-key-middle" @click="val2input('0')">0</div>
  26.       <div class="pay-key-bottom pay-key-del" @click="delVal" v-html="del"></div>
  27.      </div>
  28.     </div>
  29.    </div>
  30.    <!-- 结果显示 -->
  31.    <div class="pay-result" v-if="!status">
  32.     <div class="loader"></div>
  33.     <div>{{loadingTxt}}</div>
  34.    </div>
  35.   </div>
  36.   <!-- 遮罩层 -->
  37.   <div class="gray-wrapper" v-show="payPopOptions.isShow"></div>
  38.  </div>
  39. </template>
  1. export default {
  2.   name: 'vue-pay-pop',
  3.   props: ['payPopOptions'],
  4.   data () {
  5.    return {
  6.     //可选参数，支持改变
  7.     //顶部文字
  8.     title: this.payPopOptions.title || '请输入支付密码',
  9.     //密码长度
  10.     pwdLength: this.payPopOptions.pwdLength || 6,
  11.     //底部删除按钮
  12.     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>',
  13.     //默认等候文字
  14.     loadingTxt: this.payPopOptions.loadingTxt || '请稍候...',
  15.     //默认等候时间
  16.     loadingTime: this.payPopOptions.loadingTime || 1000,
  17.     //显示结果后，多久重回默认
  18.     resultTime: this.payPopOptions.resultTime || 1000,
  19.     //成功文字
  20.     successTxt: this.payPopOptions.successTxt || '支付成功',
  21.     //失败文字
  22.     failTxt: this.payPopOptions.failTxt || '支付失败',
  23.     //默认参数，无法改变
  24.     //键盘数字(1~9)
  25.     keyBoards: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  26.     //键入的值
  27.     val: [],
  28.     //默认输入框与等待层是否显示
  29.     status: true
  30.    }
  31.   },
  32.   methods: {
  33.    val2input(item) {
  34.     this.val.push(item)
  35.     if (this.val.length == this.pwdLength) {
  36.      //打开等待层
  37.      this.status = false
  38.      //输入完毕后将值传递给父组件
  39.      this.$emit('inputDown', this.val.join(''))
  40.      //清空数据
  41.      this.val = []
  42.     }
  43.    },
  44.    delVal () {
  45.     if (this.val.length > 0) this.val.pop()
  46.    },
  47.    closePay () {
  48.     this.payPopOptions.isShow = false;
  49.    },
  50.    $payStatus(flag = false) {
  51.     const that = this
  52.     //模拟等候feel
  53.     setTimeout(() => {
  54.      if (flag) {
  55.       //成功
  56.       this.loadingTxt = this.successTxt
  57.       //关闭输入层，重置等待语
  58.       setTimeout(function() {
  59.        that.payPopOptions.isShow = !flag
  60.        that.status = true
  61.        that.loadingTxt = that.payPopOptions.loadingTxt || '请稍候...'
  62.       }, this.resultTime)
  63.      } else {
  64.       //失败
  65.       this.loadingTxt = this.failTxt
  66.       //重新打开输入层，重置等待语
  67.       setTimeout(function() {
  68.        that.status = true
  69.        that.loadingTxt = that.payPopOptions.loadingTxt || '请稍候...'
  70.       }, this.resultTime)
  71.      }
  72.     }, this.loadingTime)
  73.    }
  74.   }
  75.  }

基本源码都在这里了，实现方法比较简单，这里就不多过介绍了...

3.尝试使用

我们先尝试在本地app.vue中使用

  1. <div id="app">
  2.   <div @click="showPayPop">点击弹出支付框</div>
  3.   <vue-pay-pop ref="pay" :payPopOptions="payPopOptions" @inputDown="inputDown"></vue-pay-pop>
  4.  </div>
  1. import vuePayPop from './lib/vue-pay-pop'
  2. export default {
  3.  name: 'app',
  4.  data () {
  5.   return {
  6.    payPopOptions: {
  7.     isShow: false
  8.    },
  9.   }
  10.  },
  11.  components: {
  12.   vuePayPop
  13.  },
  14.  methods: {
  15.   inputDown(val) {
  16.    //模拟检查数据
  17.    setTimeout(() => {
  18.     if (val == '111111') {
  19.      this.$refs.pay.$payStatus(true)
  20.     } else {
  21.      this.$refs.pay.$payStatus(false)
  22.     }
  23.    }, 1000)
  24.   },
  25.   showPayPop() {
  26.    this.payPopOptions.isShow = true;
  27.   }
  28.  }
  29. }

其中payPopOptions中isShow是必传项，用来控制弹出框的显隐

其他更多参数为可选参数

4.更改配置文件

ok，现在我们去更改配置文件，为我们的发布做准备

index.js

  1. import vuePayPop from './vue-pay-pop.vue'
  2. const PayPop = {
  3.   install(Vue, options) {
  4.     Vue.component(vuePayPop.name, vuePayPop)
  5.   }
  6. }
  7. if (typeof window !== 'undefined' && window.Vue) {
  8.   window.PayPop = PayPop
  9.   Vue.use(PayPop)
  10. }
  11. export default PayPop

package.json

修改箭头中所指

1. 你的插件版本号，以后每次上传npm都需要更改

2. 不设为false无法发布

3. 填写你自己的github托管地址（如何将代码上传github就不说了，大家可以参考Git教程---廖雪峰）

webpack.config.js

修改entry和filename

index.html

  1. <div id="app"></div>
  2. <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

  1. import vuePayPop from "vue-pay-pop"
  2. vue.use(vuePayPop)

这样我们就可以在自己的vue文件中直接引用啦...

ok，那到这里我们的内容就结束了。

另外如果大家觉得有用的话，欢迎github上献上您的star，当然也可以在评论或issues中向我提出您的问题与建议，十分感谢。

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！