iT邦幫忙

第 12 屆 iThome 鐵人賽

0
自我挑戰組

跟 VueJS 認識的30天系列 第 20

[DAY20]跟 Vue.js 認識的30天 - Vue 插件(Plugin)

  • 分享至 

  • xImage
  •  

這一篇說實在的,現在的我還不能寫出有用的插件,所以這一篇筆記主要也是學習使用別人寫好的插件。

使用插件

Vue.use('PluginName', {
  //options
})

使用別人寫好的插件

插件 : VueAxios

import Vue from 'vue'
//必須先載入 axios 跟 VueAxios
//VueAxios 的目的是讓 axios 被 Vue 整合(加在 Vue 原型中),確保所有模組都可以使用 axios 
import axios from 'axios'
import VueAxios from 'vue-axios'

//在使用 Vue.use() 來讓 Vue 可以使用該 VueAxios 插件
Vue.use(VueAxios, axios)

其實在使用別人寫好的插件時,都會附使用說明,就照著說明使用即可。

就目前而言,比較常用的 Vue 插件就是 Vue-router 跟 Vuex ,但因為這2個插件只要檢測到存在 Vue 這個變量後,就會自動調用 Vue.use() ,所以不需要額外寫 Vue.use() ,但必須注意如果是使用 CommonJS 模塊化,仍得使用 Vue.use()

開發插件

可以將比較常用或可複用的方法寫在 Plugin 裡做整合,之後再透過 Vue.use() 一次性載入到專案中使用。

const MyPlugin = {
  install(Vue, options) {
    // 1. 添加全局方法或 property
    Vue.myGlobalMethod = function () {
      //內容
      console.log(Vue, options)
    }

    // 2. 全局 directive
    Vue.directive('my-directive', {
      //內容
      bind(el,binding,vnode){
        console.log(Vue, options)
      }
  })

    // 3. 全局 mixin
    Vue.mixin({
      //內容
      created(){
        console.log(Vue, options)
      }
    })

    // 4. 添加實例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      //內容
      console.log(Vue, options)
      
    }
  }
}

https://ithelp.ithome.com.tw/upload/images/20210212/2012755360L484hfsl.png

Demo:DAY20 | 跟 Vue.js 認識的30天 - Vue 插件(Plugin)

參考資料

Vue.js - 插件

Yes


上一篇
[DAY19] 跟 Vue.js 認識的30天 - Vue 自定義指令(`directive`)
下一篇
[DAY21]跟 Vue.js 認識的30天 - Vue 過濾器(`filter`)
系列文
跟 VueJS 認識的30天21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言