轉自：http://www.imooc.com/article/19691
寫在前面
本次示範的是開發一個 vue手機虛拟支付鍵盤插件 主要講解的是如何快速開發一個vue插件并釋出到npm上
源碼位址
所有代碼都可以在我的GitHub vue-pay-keyboard 上檢視,歡迎start..
demo示範位址
請用手機或者電腦仿真檢視 vuepayboard
關于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的插件應該如何寫并釋出到npm上供大家使用呢 其實非常的簡單.
vue插件的規範
vue官網有給出明确的文檔 vue插件開發 ,我們需要有一個公開方法 install,裡面來包含我們要處理的業務。這個方法的第一個參數是 Vue 構造器 , 第二個參數是一個可選的選項對象:
// plug.js
const plug = { // 定義一個對象
install (Vue, options) { // 需要擁有一個 install 方法
}
}
// 導出這個對象
export default plug
那麼此時我們就可以通過 use的方式來使用
import plug from 'plug'
Vue.use(plug)
此時plup暴露給我們的 就是 install 函數定義的方法及屬性
廢話不多說，直接開始我們的插件開發,本次将直接使用vue簡化版腳手架.至于為什麼不從0開始搭建webpack,原因大緻是因為網上太多諸如此類的部落格了，就沒必要再嚼别人的口香糖了，其次為了照顧那些不懂 webpack 配置的童鞋們以及達到快速開發的目的.
初始化項目
一切都基于這個腳手架來改造，隻需要稍微改動就可以變成我們的東西,當然其中重要的配置 會相對應的解釋
這裡我選擇了使用sass 因為後面我會用到 大家可以自行選擇
OK 一切先用預設的,等會我們再改, 啟動項目之後，我們把自帶的多餘的東西全删掉，然後在src下面建立一個 lib檔案 用于存放我們的源碼
并建立 index.js 用于作為我們的插件入口
建立一個 vue-pay-keyboard.vue 存放我們的開發的元件
至此 檔案目錄如下：
.
├── src // 源碼目錄
│ ├── lib // 源碼
│ │ ├── index.js // 插件入口
│ │ ├── vue-pay-keyboard.vue // 元件
│ ├── App.vue // 頁面入口檔案
│ ├── main.js // 程式入口檔案，加載各種公共元件
├── index.html // 入口html檔案
.
非常簡潔，然後開始寫我們的index.js
我們需要導入.vue元件，并按照vue插件規範開發并且導出,這裡我們用全局元件的方式作為插件,其他類型的插件調用方式也都大同小異
import vuePayKeyboard from './vue-pay-keyboard.vue' // 導入元件
const paykeyboard = {
install (Vue, options) {
Vue.component(vuePayKeyboard.name, vuePayKeyboard) // vuePayKeyboard.name 元件的name屬性
// 類似通過 this.$xxx 方式調用插件的 其實隻是挂載到原型上而已
// Vue.prototype.$xxx // 最終可以在任何地方通過 this.$xxx 調用
// 雖然沒有明确規定用$開頭 但是大家都預設遵守這個規定
}
}
export default paykeyboard // 導出..
ok 可以說基本的開發環境我們已經搭建完成了...你們信嗎？
接下來我們寫鍵盤的業務邏輯 會相對複雜，這裡根于不同的業務需求，會有不同的解決方案，但是有些東西都是相通的.
如何寫好一個元件
我認為通常一個好的插件 首要的是解決使用者的問題,其次在有必要的情況下再進行個别案例的解決,通常需要如下：
- 通用性 // 能夠滿足大部分使用者需求
- 可訂制性 // 能夠滿足使用者針對不同業務環境進行訂制
- 可擴充性 // 能夠滿足使用者對其他方面的拓展
我們先簡單的寫下樣式 我盡量寫的像支付寶的樣式哈。。。
同時對外開放幾個屬性和方法
可傳屬性
| Property | Description | type | default |
|---|---|---|---|
| highlightColor | 點選時高亮的顔色 | String | #000 |
| pasDigits | 密碼的位數 | Number | 6 |
| isPay | 是否顯示支付鍵盤 | Boolean | false |
| payTitle | 支付标題 | String | 請輸入支付密碼 |
事件
| Function Name | Description |
|---|---|
| pasEnd | 密碼輸入完畢 |
| close | 關閉鍵盤 |
好了 我們的靜态頁面大緻完成了, 輸完6位号碼自動驗證 進行下一步動作
這裡移動端的1px用了我之前寫的一個十分簡單的class，至于其他邏輯可看源碼,由于時間緊迫,代碼方面我們往後再說，至此 我們基本完成開發 開始效果調試
在app.vue中寫一個簡單的按鈕用于喚起支付鍵盤
并且在main.js中導入vuePayKeyboard 插件
我們先暫時這麼寫 因為還未釋出到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>
可以看到示範效果如下：
呼 ~ 至此 我們所有開發都完成了 前面都是大家熟悉的 現在進入打包以及釋出 也都是幾分鐘的事情.
修改 weppack.config.js 部配置設定置
module.exports = {
// entry: './src/main.js', // 項目入口 我們通過npm run dev 就是從這裡進去的 我們通過run build 打包編譯也是
// 因為我們要打包的插件在lib裡面 是以稍稍改一下
entry: './src/lib/index.js', // 注釋掉原有的
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js' // 打包後輸出的檔案名
filename: 'vue-pay-keyboard.js' // 我們可不想打包後叫build.js 多low啊 起一個與項目相對應的
library: 'PayKeyboard', // library指定的就是你使用require時的子產品名，這裡便是require("PayKeyboard")
libraryTarget: 'umd', //libraryTarget會生成不同umd的代碼,可以隻是commonjs标準的，也可以是指amd标準的，也可以隻是通過script标簽引入的。
umdNamedDefine: true // 會對 UMD 的建構過程中的 AMD 子產品進行命名。否則就使用匿名的 define。
},
ok 通過 npm run build 打包一次
此時可以看到生成了一個dist檔案裡面并且有兩個檔案 一個vue-pay-keyboard.js與一個map檔案
我們已經打包完成 先在index.html試一試是否可以通過直接導入script标簽的方式使用
此時我們需要先把index.html裡面預設導入build.js檔案改成我們打包之後的檔案名稱 并且需要導入vue
此時并沒有我們想象的那麼順利 報錯了..
報錯的原因是我們并沒注入vue-pay-keyboard 因為直接用标簽的方式 我們并不可能使用use
修改index.js檔案
...
// 新增
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(paykeyboard);
}
...
再次打包 可以看到已經成功了
最後釋出npm 最重要的是我們需要先修改package.json檔案
private:false, // 預設是true 私人的 需要改為false 不然發不上去 你可以試試..
"license": "MIT", // 許可證
"main": "dist/vue-pay-keyboard.js", // 這個超級重要 決定了你 import xxx from “vue-pay-keyboard” 它預設就會去找 dist下的vue-pay-keyboard 檔案
"repository": {
"type": "git",
"url": "https://github.com/yucccc/vue-pay-keyboard"
}, // 配置這個位址存放你項目在github上的位置 也尤為重要
OK 一切搞定 釋出npm吧 哦 記得寫一下readme
注冊好npm後 添加使用者
npm adduser
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com
因為我這邊已經添加過了 沒辦法示範 接着
沒問題
npm login // 登陸
npm publish // 釋出
報了一個錯,說了這麼久 我自己卻忘了把私人改為 false.
OK 我們釋出成功.試一試能不能下載下傳并且引用先.(有時候可能會存在延時或者緩存)
然後再嘗試通過 npm 下載下傳來看看否使用吧 ~~
我們通過安裝依賴
正常導入之後可能會發現找不到vue-pay-keyboard 這個子產品.
原因是我們的忽略檔案預設忽略了 dist 檔案
修改 .gitignore 去掉忽略dist
這裡注意 每次上到npm上需要更改版本号，不然也會錯誤
總結:
vue插件的大緻思路其實都是這樣.
你也趕快來開發屬于你的第一個vue插件吧.
作者： Y2sh
連結：http://www.imooc.com/article/19691
來源：慕課網
本文原創釋出于慕課網 ，轉載請注明出處，謝謝合作！