1.基本用法
1.1 作用
插件通常用來(lái)為 Vue 添加全局功能崩侠，所謂全局即不需要像組件那樣财饥，每次使用他前都需要先引入一次。對(duì)于插件只要在最開(kāi)始引入一次闸迷，在任何組件就可以直接使用士败。（類似于我們?cè)趙indow上添加的方法屬性那樣闯两，任何地方都可以用）
下面幾種常見(jiàn)的用途：
- 添加全局方法或者 property。如：vue-custom-element
- 添加全局資源：指令/過(guò)濾器/過(guò)渡等谅将。如 vue-touch
- 通過(guò)全局混入來(lái)添加一些組件選項(xiàng)漾狼。如 vue-router
- 添加 Vue 實(shí)例方法，通過(guò)把它們添加到 Vue.prototype 上實(shí)現(xiàn)饥臂。
- 一個(gè)庫(kù)逊躁，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能隅熙。如 vue-router
1.1 使用方式
主要兩種使用方式
一：全局引入方式
（1）使用步驟
通過(guò)全局方法 Vue.use() 使用插件稽煤。它需要在你調(diào)用 new Vue() 啟動(dòng)應(yīng)用之前完成
// 調(diào)用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
// ...組件選項(xiàng)
})
也可以傳入一個(gè)可選的選項(xiàng)對(duì)象：
Vue.use(MyPlugin, { someOption: true })
（2）在main.js中配置
比如：使用element-ui為例：
import Vue from 'vue'
import {
Button,
Radio,
RadioGroup,
Checkbox,
......
} from 'element-ui'
Vue.use(Button)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Checkbox)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$ELEMENT = { size: 'medium' }
組使用件中
<template>
<div>
<el-button type="danger">危險(xiǎn)按鈕</el-button>
</div>
</template>
二：組件引入方式
比如核芽，以使用 swiper為例
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
組件中使用
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
swiperOption:{
//這里配置的參數(shù)參考官網(wǎng)API設(shè)置，這里的pagination就是下圖中的官方配置
pagination: {
el: '.swiper-pagination',
}
}
}
}
}
</script>
2.開(kāi)發(fā)插件
vue插件其實(shí)就是一個(gè)簡(jiǎn)單的js對(duì)象而已念脯，然后這個(gè)插件對(duì)象有一個(gè)公開(kāi)屬性 install 狞洋，他的值為一個(gè)函數(shù)，此函數(shù)接受兩個(gè)參數(shù)绿店。第一個(gè)參數(shù)是 Vue 構(gòu)造器 , 第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象吉懊。
一：開(kāi)發(fā)插件有四種方法
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 注入組件選項(xiàng)
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4. 添加實(shí)例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
}
二：添加實(shí)例方法
其中最常用的：【4. 添加實(shí)例方法】的寫(xiě)法和使用方法，下面舉例說(shuō)明toast 最簡(jiǎn)單插件開(kāi)發(fā)過(guò)：
（1）新建一個(gè)plugin目錄假勿，編輯插件toast.js文件
// toast插件
var Toast = {}
Toast.install = function (Vue, options) {
Vue.prototype.$msg = 'Hello World'
}
module.exports = Toast
（2）在 main.js 中借嗽，需要導(dǎo)入 toast.js 并且通過(guò)全局方法 Vue.use() 來(lái)使用插件
import Vue from 'vue'
import App from './App'
import router from './router'
// 全局引入插件
import Toast from './plugin/toast'
Vue.use(Toast)
（3）我們?cè)诮M件中來(lái)獲取該插件定義的 $msg 屬性，比如在根組件App.vue中
export default {
name: 'App',
mounted () {
// 調(diào)用toast
console.log(this.$msg) //
}
}
控制臺(tái)輸出：Hello World
三：添加全局資源
這里主要介紹過(guò)濾器
（1）在plugin目錄新建插件filter.js文件
/*
*@description:格式化金額
*/
var filter = {}
filter.install = function (Vue, num) {
// 時(shí)間格式化過(guò)濾器转培，輸入內(nèi)容是number或者Date對(duì)象恶导，輸出是YYYY-MM-DD HH-MM-SS
Vue.filter('moneyFormart', function (num) {
num = parseFloat((num + '').replace(/[^\d\.-]/g, '')).toFixed(2) + ''
let Integ = num.split('.')[0].split('').reverse()
let deci = num.split('.')[1]
let space = ''
for (let i = 0; i < Integ.length; i++) {
space += Integ[i] + ((i + 1) % 3 === 0 && (i + 1) !== Integ.length ? ',' : '')
}
return space.split('').reverse().join('') + '.' + deci
})
}
module.exports = filter
（2）在 main.js 中，需要導(dǎo)入 filter.js 并且通過(guò)全局方法 Vue.use() 來(lái)使用插件
// 全局引入插件
import Toast from './plugin/toast'
import filter from './plugin/filter'
Vue.use(Toast)
Vue.use(filter)
（3）HelloWorld.vue頁(yè)面上使用
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Hello World</h2>
<h2>{{ price | moneyFormart }}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
price: '12.37699'
}
}
}
</script>
添加全局資源也可以不放在插件里面實(shí)現(xiàn)浸须，可以直接在main.js入口文件創(chuàng)建Vue實(shí)例前添加：
//掛載指令
Vue.directive('noMoreClick', {
inserted(el, binding) {
el.addEventListener('click', e => {
el.classList.add('is-disabled')
el.disabled = true
setTimeout(() => {
el.disabled = false
el.classList.remove('is-disabled')
}, 3000)
})
}
})
// 掛載全局
Vue.prototype.$http = httpRequest // ajax請(qǐng)求對(duì)象
Vue.prototype.$Moment = moment // 時(shí)間
Vue.prototype.isAuth = isAuth // 權(quán)限方法
Vue.prototype.$md5 = md5
其他組件就可以通過(guò)this直接使用:
this.$http({
url: this.$http.adornUrl('/sys/logout'),
method: 'post',
data: this.$http.adornData()
}).then(({ data }) => {
if (data && data.code === 0) {
clearLoginInfo()
this.$router.push({ name: 'login' })
}
})
3. 組件和插件的區(qū)別
（1）核心區(qū)別
- 組件 (Component) 是用來(lái)構(gòu)成你的 App 的
業(yè)務(wù)模塊惨寿，它的目標(biāo)是 App.vue。 - 插件 (Plugin) 是用來(lái)增強(qiáng)你的技術(shù)棧的功能模塊删窒，它的目標(biāo)是 Vue 本身裂垦。
簡(jiǎn)單來(lái)說(shuō)，插件就是指對(duì)Vue的功能的增強(qiáng)或補(bǔ)充肌索。
（2）其他區(qū)別
- 組件的使用頻率往往大于插件
- 組件的作用范圍往往小于插件
- 插件可以封裝組件蕉拢，組件可以暴露數(shù)據(jù)給插件
一個(gè)Vue插件可以是一堆Vue組件的集合（插件干的事就是把內(nèi)部的組件幫你倒入到vue全局下），也可以是用來(lái)擴(kuò)展Vue功能的诚亚，比如 Vuex晕换， Vue-Router。
4. 打包到npm
測(cè)試完成站宗，下面就要把的內(nèi)容打包發(fā)布到npm 上去,具體步驟可以參照
https://www.cnblogs.com/adouwt/p/9211003.html
