前言
寫此文前特意google了一下,因為有較詳細的開發教程我再寫意義不大,有把外掛封裝成元件的教程,有把自己的元件封住成外掛的教程,本文主要說明如何把第三方的外掛封裝成vue外掛,簡化配置,一鍵安裝,主要提供思路,封裝方法大同小異·,文章略長要有耐心。
gitment
gitment是一個基於github issues封裝的評論外掛,以這個外掛作為演示,把它封裝成vue外掛。vue-gitment,該外掛已釋出到npm,並在自己的開源專案Essays中安裝使用
專案初始化
封裝vue的外掛用webpack-simple很合適,vue init webpack-simple vue-gitment
此命令建立我們的專案的目錄,建立資料夾和檔案,最後結構是這樣的

lib目錄是我們的外掛目錄,其他的預設就好
修改配置項
首先是修改package.json
{
"name": "vue-gitment",
"version": "0.1.1",
"description": "A comment plugin by gitment",
"main": "dist/vue-gitment.js",
"directories": {
"dist": "dist"
},
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vue-blog/vue-gitment.git"
},
"dependencies": {
"gitment": "^0.0.3",
"vue": "^2.3.3"
},
"devDependencies": {
},
"author": "wmui",
"license": "MIT",
"bugs": {
"url": "https://github.com/vue-blog/vue-gitment/issues"
},
"homepage": "https://github.com/vue-blog/vue-gitment#readme"
}
複製程式碼
把依賴性gitment新增到dependencies,main是我們打包後的檔案入口,你可以用npm init命令生成一個package.json
修改webpack.config.js

我們只需配置入口和出口,不要刪除預設的配置,因為後面開發好外掛,我們需要檢視工作效果
修改index.html

因為我們修改了webpack配置,自然要把script的src修改一下
封裝外掛
VueComment.vue內容如下
<template>
<div v-comment="options"></div>
</template>
<script>
// 引入依賴項
import Gitment from 'gitment'
export default {
name: 'vue-comment',
props: ['options'],
directives: {
// 自定義指令
comment: {
bind: function (el, binding) {
const gitment = new Gitment({
id: binding.value.id + '',
owner: binding.value.owner,
repo: binding.value.repo,
oauth: {
client_id: binding.value.oauth.client_id,
client_secret: binding.value.oauth.client_secret
}
})
gitment.render(el)
}
}
}
}
</script>
複製程式碼
相信熟悉vue的一眼都看懂了,render函式是gitment物件的方法,不用關心,和我們開發元件是一樣一樣的
index.js封裝元件
import VueComment from './VueComment.vue'
const comment = {
install: function(Vue) {
Vue.component(VueComment.name, VueComment)
}
}
// 這裡的判斷很重要
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(comment)
}
export default comment
複製程式碼
我們在webpack配置的入口檔案就是他,install是掛載元件的方法,有了它我們就可以在外部use一個外掛了,簡單吧
測試外掛
首先測試build是否成功
npm run build
dist目錄會生成如下檔案

我們需要把package和webpack的修改一下,這就是為什麼我前面說不要刪除而是註釋掉 ,把package.json的main修改為dist/build.js,wepack的entry和filename換成預設配置,index.html的src也換成預設的
在main.js中引入我們的元件
import VueComment from './lib/index.js'
Vue.use(VueComment)
複製程式碼
App.vue中使用我們的外掛
<template>
<div id="app">
<vue-comment :options="options" v-if="options"></vue-comment>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {
id: 'article id',
owner: 'Your GitHub ID',
repo: 'The repo to store comments',
oauth: {
client_id: 'Your client ID',
client_secret: 'Your client secret',
}
}
}
}
}
</script>
<style>
@import '~gitment/style/default.css';
</style>
複製程式碼
執行npm run dev

Error: Not Found
是因為我沒配置client_id。
釋出外掛
完成測試工作後我們就可以釋出到npm了,這個就比較見到了,註冊個npm賬號,在你要釋出的專案目錄執行npm login
,輸入賬號密碼和郵箱,然後npm publish
就釋出成功了,npm install vue-gitment
檢視效果,建議直接看原始碼,因為真的很簡單。
結語
自己動手豐衣足食,我覺得每個前端開發者都要一個屬於自己的輪子(雖然vue-gitment不是輪子),一個屬於自己輪子,在造輪子的工程中你能學到很多很多,沒錯,接下來我可能,,,哼哼