一、初始化本地開發項目
采用vue-cli，初始化一個vue項目
1.安裝node，默認會安裝npm
去node官網下載並安裝，安裝完后打開cmd，查看是否安裝成功
2.安裝vue-cli
npm install -g vue-cli
安裝完后，同樣可以查看下安裝情況
3.初始化一個vue項目
vue init webpack my-plugin
然后填寫相關信息：
然后進入項目
cd my-plgin
安裝項目依賴
npm install
啟動項目
npm run dev
打開瀏覽器，看到項目已經啟動成功了
二、插件開發
插件通常會為 Vue 添加全局功能。插件的范圍沒有限制——一般有下面幾種：
-
添加全局方法或者屬性，如: vue-custom-element
-
添加全局資源：指令/過濾器/過渡等，如 vue-touch
-
通過全局 mixin 方法添加一些組件選項，如: vue-router
-
添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。
-
一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router
MyPlugin.install = function (Vue, options) {
// 第一種方法. 添加全局方法或屬性
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 第二種方法. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 第三種方法. 注入組件
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 第五種方法. 添加實例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
// 第六種方法，注冊組件
Vue.component(組件名, 組件)
}
toast提示可以選擇
Vue.prototype，輸入框自動獲取焦點可以選擇
Vue.directive指令，自定義組件可以選擇
Vue.component的形式。
新建一個plugin目錄，放置我們要開發的插件，比如這里我們做一個簡單的total彈框顯示
然后我們搭建插件的基本殼子，test.js中代碼：
import testToast from './toast.vue'
let test = {}
// 方法的第一個參數是傳入的Vue，第二個是自定義的插件參數
test.install = function (Vue, options) {
Vue.prototype.$msg = 'Hello I am test.js'
Vue.prototype.$myMethod = function (arr) {
if (arr.length < 0) {
return false
} else {
arr = arr.join('連接你我')
return arr
}
}
// testPanel.name 組件的name屬性
Vue.component(testToast.name, testToast)
}
export default test
index.js中代碼：
module.exports = require('./lib/test')
待插件開發好后，就可以在mian.js中這樣使用：
而后在我們的頁面中就可以直接像使用組件的方式使用插件：
基本思路和插件的殼子有了，下面就開始開發toast.vue，這插件的具體內容了
<template>
<div>
<div class="toast" ref='toastPosition' :class="{active: toastHidden}">
<div class="toast-warpper">
{{text}}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'test-toast',
data () {
return {
text: '',
toastHidden: false
}
},
created () {
// this.toastPlugin()
},
methods: {
toastPlugin (msg, time) {
this.text = msg
this.toastHidden = true
setTimeout(() => {
this.toastHidden = false
}, time)
}
}
}
</script>
<style>
.toast {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0px;
min-height: 0px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
color: #fff;
transition: all 0.5s;
z-index: -1;
opacity: 0;
}
.toast.active {
width: 150px;
min-height: 25px;
opacity: 1;
z-index: 11;
}
</style>
實現效果如下：
點擊按鈕，出現下面的toast彈框，2s后消失。至此，我們的插件就開發完了。
現在可以發布到GitHub或打包發布到npm上去。
三、上傳到GitHub上
1.對項目進行打包,使用npm run build打包，打包后打開根目錄下的dist文件夾，里面有一個index.html文件，打開運行，結果是白屏
原因：路徑不對，這里需要修改打包路徑，在項目的config --->index.js里面修改assetsPublicPath
2.打包后上傳到GitHub上
git忽略監控我們打包后的dist文件夾，所以這里需要取消忽略，讓
git監控
dist文件夾，不然提交遠程庫的時候不會提交
dist文件夾：
/dist/這行代碼刪除，這樣，后面我們再
git add .的時候就會監控
dist文件夾了。
git add ./ git commit -m "XXX" git remote add origin https://github.com/wangibook/wangibook.git git push -u origin master
如果報Changes not staged for commit，可以用 git commit -am "xxx"
如果報一坨黃字，可以使用 git push -u origin master -f 強制提交（會覆蓋之前的，慎用）
第一次提交需要 git push -u origin master，后面就直接 git push 就可以了
接下來我們打開github上面的項目看下，刷新后看到，項目以上傳到遠程了，其中既有我們的源碼，也有打包后的dist文件
打開鏈接： https://wangibook.github.io/test-plugin-toast/dist/index.html#/ 就可以看到內容了
至此，我們上傳github的操作已經完成
四、發布到npm上，方便以后用
toast文件下面的index.js，里面就依據代碼，即導出我們的插件：
module.exports = require('./lib/test')
關於README.md，我們可以寫一個簡單的markdown文檔，
關於package.json文件，這個一開始是沒有的，這是npm包的配置文件。我們要首先進入toast文件夾的位置，
然后終端運行npm init命令來初始化一個npm包配置文件，此時他會問你一些列問題來完成配置文件：
- name：包名，默認是文件夾名。但是這個名字是需要唯一的，如果你命的名字已經被使用過了，那就只能換個名字。至於怎么查看包名是否存在，你可以去npmjs官網搜索你的包名，如果沒搜索到則可以使用。
- version：包的版本，默認是1.0.0， 你可以更換，例如0.1.0或2.0.1等。
- description：包的描述。主要描述你的包是用來做什么的。
- entry point：包入口文件，默認是
Index.js，可以自定義。 - test command：測試命令，這個直接回車就好了，因為目前還不需要這個。
- git repository：包的git倉庫地址，npm自動讀取
.git目錄作為這一項的默認值。沒使用則回車略過。 - keyword：包的關鍵詞。該項會影響到用戶怎樣才能搜到你的包，可以理解為搜索引擎悠哈的關鍵詞。建議關鍵詞要能准確描述你的包，例如："vpay vue-pay vue-password password"
- author：作者。例如你的npm賬號或者github賬號
- license：開源協議，回車就好。
下面是發布到npm上，注冊npm賬號
1.執行npm login命令登錄我們的npm賬號，輸入用戶名和密碼（輸入密碼沒有提示）
如果配置了淘寶鏡像，先設置回npm鏡像：
npm config set registry http://registry.npmjs.org
這樣就發布成功了。我們去npm官網查一下我們的包：
如果發布成功后沒有搜到，就稍微等幾分鍾。
點擊進去看下，一切正常。以后就直接可以通過npm i test-plugin-toast -g 將插件安裝到我們的項目中了。