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

这一篇说实在的,现在的我还不能写出有用的插件,所以这一篇笔记主要也是学习使用别人写好的插件。

使用插件

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 - 插件


<<:  [DAY19] 跟 Vue.js 认识的30天 - Vue 自定义指令(`directive`)

>>:  [DAY21]跟 Vue.js 认识的30天 - Vue 过滤器(`filter`)

CMoney软件工程师战斗营_Week 13

由於疫情的关系 大家已在家学习一个月 原本想说最要克服的是自制力 但没想到事情多到 我也没时间发闲~...

缘起

前言 没错,今年再度在最後一天急急忙忙赶稿。 在这个好像不会任何一个框架,就无法存活的前端圈里 决定...

Day 1 前言

刚转职成功的前端菜鸡第一次参赛,原本想简单开心的每天写一个小小的专案练习 JavaScript, C...

Day1-介绍与开始

嗨大家好~我是凯西!接下来是我开学的三十天实力增进计画的纪录 规划上会刷leetcode加强我的py...

【PHP Telegram Bot】Day01 - 开赛

前言 大家好,这是我第一次参加铁人赛 其实我一直都有想把自己会东西记录下来分享给大家 今年刚好参加完...