这一篇说实在的,现在的我还不能写出有用的插件,所以这一篇笔记主要也是学习使用别人写好的插件。
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)
}
}
}
Demo:DAY20 | 跟 Vue.js 认识的30天 - Vue 插件(Plugin)
参考资料
<<: [DAY19] 跟 Vue.js 认识的30天 - Vue 自定义指令(`directive`)
>>: [DAY21]跟 Vue.js 认识的30天 - Vue 过滤器(`filter`)
由於疫情的关系 大家已在家学习一个月 原本想说最要克服的是自制力 但没想到事情多到 我也没时间发闲~...
前言 没错,今年再度在最後一天急急忙忙赶稿。 在这个好像不会任何一个框架,就无法存活的前端圈里 决定...
刚转职成功的前端菜鸡第一次参赛,原本想简单开心的每天写一个小小的专案练习 JavaScript, C...
嗨大家好~我是凯西!接下来是我开学的三十天实力增进计画的纪录 规划上会刷leetcode加强我的py...
前言 大家好,这是我第一次参加铁人赛 其实我一直都有想把自己会东西记录下来分享给大家 今年刚好参加完...