點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

vue2.0+插件使用npm發(fā)布步驟詳解

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:49:09

vue2.0+插件使用npm發(fā)布步驟詳解

vue2.0+插件使用npm發(fā)布步驟詳解:這次給大家?guī)韛ue2.0+插件使用npm發(fā)布步驟詳解，vue2.0+插件使用npm發(fā)布的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。此篇盡量詳細(xì)，清楚的講解vue插件的開發(fā)到npm的發(fā)布，想想將你自己做的東西展示給廣大網(wǎng)民，心里還是有點(diǎn)小激動(dòng)的...…^_

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue2.0+插件使用npm發(fā)布步驟詳解:這次給大家?guī)韛ue2.0+插件使用npm發(fā)布步驟詳解，vue2.0+插件使用npm發(fā)布的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。此篇盡量詳細(xì)，清楚的講解vue插件的開發(fā)到npm的發(fā)布，想想將你自己做的東西展示給廣大網(wǎng)民，心里還是有點(diǎn)小激動(dòng)的...…^_

這次給大家?guī)韛ue2.0+插件使用npm發(fā)布步驟詳解，vue2.0+插件使用npm發(fā)布的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

此篇盡量詳細(xì)，清楚的講解vue插件的開發(fā)到npm的發(fā)布，想想將你自己做的東西展示給廣大“網(wǎng)民”，心里還是有點(diǎn)小激動(dòng)的...…^_^

先上一下插件效果圖------github傳送門

下面我們就來說說詳細(xì)做法：

1. 初始化項(xiàng)目

vue init webpack-simple vue-pay-keyboard

使用vue創(chuàng)建一個(gè)簡單的項(xiàng)目，刪除src中除了main.js和app.vue外的文件，清空app.vue中無用內(nèi)容

整理完后項(xiàng)目目錄

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>
 <!-- 結(jié)果顯示 -->
 <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 {
 //可選參數(shù)，支持改變
 //頂部文字
 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>',
 //默認(rèn)等候文字
 loadingTxt: this.payPopOptions.loadingTxt || '請稍候...',
 //默認(rèn)等候時(shí)間
 loadingTime: this.payPopOptions.loadingTime || 1000,
 //顯示結(jié)果后，多久重回默認(rèn)
 resultTime: this.payPopOptions.resultTime || 1000,
 //成功文字
 successTxt: this.payPopOptions.successTxt || '支付成功',
 //失敗文字
 failTxt: this.payPopOptions.failTxt || '支付失敗',
 //默認(rèn)參數(shù)，無法改變
 //鍵盤數(shù)字(1~9)
 keyBoards: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
 //鍵入的值
 val: [],
 //默認(rèn)輸入框與等待層是否顯示
 status: true
 }
 },
 methods: {
 val2input(item) {
 this.val.push(item)
 if (this.val.length == this.pwdLength) {
 //打開等待層
 this.status = false
 //輸入完畢后將值傳遞給父組件
 this.$emit('inputDown', this.val.join(''))
 //清空數(shù)據(jù)
 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
 //關(guān)閉輸入層，重置等待語
 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)
 }
 }
 }

基本源碼都在這里了，實(shí)現(xiàn)方法比較簡單，這里就不多過介紹了...

3.嘗試使用

我們先嘗試在本地app.vue中使用

<p id="app">
 <p @click="showPayPop">點(diǎn)擊彈出支付框</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) {
 //模擬檢查數(shù)據(jù)
 setTimeout(() => {
 if (val == '111111') {
 this.$refs.pay.$payStatus(true)
 } else {
 this.$refs.pay.$payStatus(false)
 }
 }, 1000)
 },
 showPayPop() {
 this.payPopOptions.isShow = true;
 }
 }
}

其中payPopOptions中isShow是必傳項(xiàng)，用來控制彈出框的顯隱

其他更多參數(shù)為可選參數(shù)

4.更改配置文件

ok，現(xiàn)在我們?nèi)ジ呐渲梦募?，為我們的發(fā)布做準(zhǔn)備

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. 不設(shè)為false無法發(fā)布

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.發(fā)布npm

你需要去npm官網(wǎng)注冊一個(gè)npm帳號

注冊好后

輸入你的用戶名，密碼，郵箱（密碼是不顯示的）

成功登錄后我們在輸入

ok，我們就發(fā)布成功！

6.引用

在你的項(xiàng)目中 npm install vue-pay-pop --save 下載我們的包

main.js

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

這樣我們就可以在自己的vue文件中直接引用啦...

ok，那到這里我們的內(nèi)容就結(jié)束了。

另外如果大家覺得有用的話，歡迎github上獻(xiàn)上您的star，當(dāng)然也可以在評論或issues中向我提出您的問題與建議，十分感謝。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

vue2.0+插件使用npm發(fā)布步驟詳解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：上傳步驟方法

熱門焦點(diǎn)

vue2.0+插件使用npm發(fā)布步驟詳解

vue2.0+插件使用npm發(fā)布步驟詳解

vue2.0+插件使用npm發(fā)布步驟詳解

最新推薦

猜你喜歡

熱門推薦