這次帶給大家vue2.0 外掛程式使用npm發佈步驟詳解,vue2.0 外掛程式使用npm發佈的注意事項有哪些,以下就是實戰案例,一起來看一下。
這篇盡量詳細,清楚的講解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> <p class="pay-box"> <!-- 输入框及键盘 --> <p :class="payPopOptions.isShow? 'pay-wrapper pay-wrapper-active' : 'pay-wrapper'"> <p class="pay-container" v-if="status"> <p class="pay-title"> {{title}} <p 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> </p> </p> <p class="pay-input-wrapper"> <p class="pay-input" v-for="(item, index) in pwdLength" :key="index"> <input type="password" :value="val[index]" disabled> </p> </p> <p class="pay-keyboard-wrapper"> <p class="pay-keyboard"> <p class="pay-key" v-for="item in keyBoards" :key="item" @click="val2input(item)"> {{item}} </p> </p> <p class="pay-keyboard-bottom"> <p class="pay-key-bottom pay-key-blank"></p> <p class="pay-key-bottom pay-key-middle" @click="val2input('0')">0</p> <p class="pay-key-bottom pay-key-del" @click="delVal" v-html="del"></p> </p> </p> </p> <!-- 结果显示 --> <p class="pay-result" v-if="!status"> <p class="loader"></p> <p>{{loadingTxt}}</p> </p> </p> <!-- 遮罩层 --> <p class="gray-wrapper" v-show="payPopOptions.isShow"></p> </p> </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中使用<p id="app"> <p @click="showPayPop">点击弹出支付框</p> <vue-pay-pop ref="pay" :payPopOptions="payPopOptions" @inputDown="inputDown"></vue-pay-pop> </p>
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是必傳項,用來控制彈出框的顯隱
其他更多參數為可選參數 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 PayPoppackage.json
##修改箭頭中所指
1. 你的外掛程式版本號,以後每次
上傳3. 填寫自己的github託管位址(如何將程式碼上傳github就不說了,大家可以參考Git教學---廖雪峰)
webpack.config.js
修改entry和filename
index.html
<p id="app"></p> <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中向我提出您的問題與建議,十分感謝。 ######相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ######推薦閱讀:#########JS做出折疊展開動畫(附程式碼)##########
以上是vue2.0+外掛程式使用npm發布步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!