寫在前面
本次演示的是開發(fā)一個 vue手機虛擬支付鍵盤插件
主要講解的是如何快速開發(fā)一個vue插件并發(fā)布到npm上
源碼地址
所有代碼都可以在我的GitHub vue-pay-keyboard 上查看,歡迎start..
demo演示地址
請用手機或者電腦仿真查看 vuepayboard
關(guān)于vue插件
插件一般都有如下幾種形式導入
ES6
import vuePayKeyboard from 'vue-pay-keyboard'
// 通過require 導入
var vuePayKeyboard = require('vuePayKeyboard')
// 通過use掛載
Vue.use(vuePayKeyboard)
// 或者直接導入js文件
<script src="./dist/vue-pay-keyboard.js"></script>
無論是那種方式,都可以非常方便的在我們的項目當中使用,那么vue的插件應(yīng)該如何寫并發(fā)布到npm上供大家使用呢 其實非常的簡單.
vue插件的規(guī)范
vue官網(wǎng)有給出明確的文檔 vue插件開發(fā) ,我們需要有一個公開方法 install,里面來包含我們要處理的業(yè)務(wù)。這個方法的第一個參數(shù)是 Vue 構(gòu)造器 , 第二個參數(shù)是一個可選的選項對象:
// plug.js
const plug = { // 定義一個對象
install (Vue, options) { // 需要擁有一個 install 方法
}
}
// 導出這個對象
export default plug
那么此時我們就可以通過 use的方式來使用
import plug from 'plug'
Vue.use(plug)
此時plup暴露給我們的 就是 install 函數(shù)定義的方法及屬性
廢話不多說，直接開始我們的插件開發(fā),本次將直接使用vue簡化版腳手架.至于為什么不從0開始搭建webpack,原因大致是因為網(wǎng)上太多諸如此類的博客了硝拧，就沒必要再嚼別人的口香糖了橱鹏，其次為了照顧那些不懂 webpack 配置的童鞋們以及達到快速開發(fā)的目的.
初始化項目
vue init webpack-simple vue-pay-keyboard
一切都基于這個腳手架來改造，只需要稍微改動就可以變成我們的東西,當然其中重要的配置 會相對應(yīng)的解釋
這里我選擇了使用sass 因為后面我會用到 大家可以自行選擇
OK 一切先用默認的,等會我們再改, 啟動項目之后糠悼，我們把自帶的多余的東西全刪掉届榄，然后在src下面新建一個 lib文件 用于存放我們的源碼
并新建 index.js 用于作為我們的插件入口
新建一個 vue-pay-keyboard.vue 存放我們的開發(fā)的組件
至此 文件目錄如下：
.
├── src // 源碼目錄
│ ├── lib // 源碼
│ │ ├── index.js // 插件入口
│ │ ├── vue-pay-keyboard.vue // 組件
│ ├── App.vue // 頁面入口文件
│ ├── main.js // 程序入口文件，加載各種公共組件
├── index.html // 入口html文件
.
非常簡潔倔喂，然后開始寫我們的index.js
我們需要導入.vue組件铝条，并按照vue插件規(guī)范開發(fā)并且導出,這里我們用全局組件的方式作為插件,其他類型的插件調(diào)用方式也都大同小異
import vuePayKeyboard from './vue-pay-keyboard.vue' // 導入組件
const paykeyboard = {
install (Vue, options) {
Vue.component(vuePayKeyboard.name, vuePayKeyboard) // vuePayKeyboard.name 組件的name屬性
// 類似通過 this.$xxx 方式調(diào)用插件的 其實只是掛載到原型上而已
// Vue.prototype.$xxx // 最終可以在任何地方通過 this.$xxx 調(diào)用
// 雖然沒有明確規(guī)定用$開頭 但是大家都默認遵守這個規(guī)定
}
}
export default paykeyboard // 導出..
ok 可以說基本的開發(fā)環(huán)境我們已經(jīng)搭建完成了...你們信嗎？
接下來我們寫鍵盤的業(yè)務(wù)邏輯 會相對復雜席噩，這里根于不同的業(yè)務(wù)需求班缰，會有不同的解決方案，但是有些東西都是相通的.
如何寫好一個組件
我認為通常一個好的插件 首要的是解決用戶的問題,其次在有必要的情況下再進行個別案例的解決,通常需要如下：
- 通用性 // 能夠滿足大部分用戶需求
- 可訂制性 // 能夠滿足用戶針對不同業(yè)務(wù)環(huán)境進行訂制
- 可擴展性 // 能夠滿足用戶對其他方面的拓展
我們先簡單的寫下樣式 我盡量寫的像支付寶的樣式哈悼枢。埠忘。。
同時對外開放幾個屬性和方法
可傳屬性
| Property | Description | type | default |
|---|---|---|---|
| highlightColor | 點擊時高亮的顏色 | String | #000 |
| pasDigits | 密碼的位數(shù) | Number | 6 |
| isPay | 是否顯示支付鍵盤 | Boolean | false |
| payTitle | 支付標題 | String | 請輸入支付密碼 |
事件
| Function Name | Description |
|---|---|
| pasEnd | 密碼輸入完畢 |
| close | 關(guān)閉鍵盤 |
好了 我們的靜態(tài)頁面大致完成了, 輸完6位號碼自動驗證 進行下一步動作
這里移動端的1px用了我之前寫的一個十分簡單的class萧芙，至于其他邏輯可看源碼,由于時間緊迫,代碼方面我們往后再說给梅，至此 我們基本完成開發(fā) 開始效果調(diào)試
在app.vue中寫一個簡單的按鈕用于喚起支付鍵盤
并且在main.js中導入vuePayKeyboard 插件
我們先暫時這么寫 因為還未發(fā)布到npm
import vuePayKeyboard from './lib/index.js'
Vue.use(vuePayKeyboard)
在app.vue中注冊事件并使用插件
<button @click="payShow()">點擊支付</button>
// 直接使用
<vue-pay-keyboard :isPay='isPay' @pasEnd='pasEnd' @close='isPay=false'></vue-pay-keyboard>
可以看到演示效果如下：
呼 ~ 至此 我們所有開發(fā)都完成了 前面都是大家熟悉的 現(xiàn)在進入打包以及發(fā)布 也都是幾分鐘的事情.
修改 weppack.config.js 部分配置
module.exports = {
// entry: './src/main.js', // 項目入口 我們通過npm run dev 就是從這里進去的 我們通過run build 打包編譯也是
// 因為我們要打包的插件在lib里面 所以稍稍改一下
entry: './src/lib/index.js', // 注釋掉原有的 注意 我們打包的時候一定不要把vue也打包進去
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js' // 打包后輸出的文件名
filename: 'vue-pay-keyboard.js' // 我們可不想打包后叫build.js 多l(xiāng)ow啊 起一個與項目相對應(yīng)的
library: 'PayKeyboard', // library指定的就是你使用require時的模塊名，這里便是require("PayKeyboard")
libraryTarget: 'umd', //libraryTarget會生成不同umd的代碼,可以只是commonjs標準的双揪，也可以是指amd標準的动羽，也可以只是通過script標簽引入的。
umdNamedDefine: true // 會對 UMD 的構(gòu)建過程中的 AMD 模塊進行命名渔期。否則就使用匿名的 define运吓。
},
ok 通過 npm run build 打包一次
此時可以看到生成了一個dist文件里面并且有兩個文件 一個vue-pay-keyboard.js與一個map文件
我們已經(jīng)打包完成 先在index.html試一試是否可以通過直接導入script標簽的方式使用
此時我們需要先把index.html里面默認導入build.js文件改成我們打包之后的文件名稱 并且需要導入vue
此時并沒有我們想象的那么順利 報錯了..
報錯的原因是我們并沒注入vue-pay-keyboard 因為直接用標簽的方式 我們并不可能使用use
修改index.js文件
...
// 新增
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(paykeyboard);
}
...
再次打包 可以看到已經(jīng)成功了
最后發(fā)布npm 最重要的是我們需要先修改package.json文件
private:false, // 默認是true 私人的 需要改為false 不然發(fā)不上去 你可以試試..
"license": "MIT", // 許可證
"main": "dist/vue-pay-keyboard.js", // 這個超級重要 決定了你 import xxx from “vue-pay-keyboard” 它默認就會去找 dist下的vue-pay-keyboard 文件
"files": [ // 用于發(fā)布忽略 當我們的包夠復雜的時候 我們總不能把所有本地開發(fā)或者測試的組件全部都發(fā)布上去 這個時候我們開啟這個選項 意為只發(fā)布這兩個文件 當然我們這個包比較簡單 就不開啟了
"dist",
"src"
],
"repository": {
"type": "git",
"url": "https://github.com/yucccc/vue-pay-keyboard"
}, // 配置這個地址存放你項目在github上的位置 也尤為重要
OK 一切搞定 發(fā)布npm吧 哦 記得寫一下readme
注冊好npm后 添加用戶
npm adduser
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com
因為我這邊已經(jīng)添加過了 沒辦法演示 接著
npm whoami // 看一看你是誰..
沒問題
npm login // 登陸
npm publish // 發(fā)布
這里需要注意的是 如果你使用了淘寶的鏡像源，也會導致發(fā)布失敗疯趟，需要切換到npm鏡像 推薦使用nrm 這里不展開
報了一個錯,說了這么久 我自己卻忘了把私人改為 false.
OK 我們發(fā)布成功.試一試能不能下載并且引用先.(有時候可能會存在延時或者緩存)
然后再嘗試通過 npm 下載來看看否使用吧 ~~
我們通過安裝依賴
npm install vue-pay-keyboard -S
正常導入之后可能會發(fā)現(xiàn)找不到vue-pay-keyboard 這個模塊.
原因是我們的忽略文件默認忽略了 dist 文件
修改 .gitignore 去掉忽略dist
這里注意 每次上到npm上需要更改版本號拘哨，不然也會錯誤
總結(jié):
vue插件的大致思路其實都是這樣.
你也趕快來開發(fā)屬于你的第一個vue插件吧.
如果覺得對你有幫助 希望能給我一個小小的start vue-pay-keyboard
如有錯誤與紕漏,十分感謝您的指出
至于插件的更加可用性,后期有時間會修改.
感謝您看到最后！
