学习目标:
- 对比Vue2/Vue3项目如何自定义插件
学习内容:
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。
一个插件可以是一个拥有 install()
方法的对象,也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例传递给 Vue.use()
/ app.use()
的额外选项作为参数。
插件没有严格定义的使用范围,插件发挥作用的常见场景我们在下面分别以Vue2和Vue3项目的不同做一个稍详细的讲解。
我的理解:
1.
install()方法通常是自定义插件的必备部分,在该方法中接收2个参数,应用实例和options对象参数
2.在install()方法中可以添加全局混入、全局组件、全局方法、自定义指令等等...
3.在main.js中通过
Vue.use()
/app.use()
的方式调用传入install()的参数
请往下看ˇ
展示Vue2写法:
官方说法:插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:
添加全局方法或者 property。如:vue-custom-element
添加全局资源:指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法,通过把它们添加到
Vue.prototype
上实现。一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
// vue2项目
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import MyPlugin from '@plugin/my-plugin.js'
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
// 也可以传入一个可选的选项对象
Vue.use(MyPlugin, { someOption: true })
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
// MyPlugin.js
// 引入自定义的组件,Vue.component挂载到全局上
import AnalyticLink from '@component/AnalyticLink.vue'
class MyPlugin {
// 这个区域可以定义方法,Vue.prototype挂载到全局上
atRocity(row) { }
install(Vue, options) {
let pluginThis = this
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局自定义指令
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 逻辑...
}
// ...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
// ...
})
// 4. 全局添加实例方法
Vue.prototype.$atRocity = function (...args) {
return pluginThis.atRocity(...args)
}
// 5.绑定全局组件
Vue.component('AnalyticLink', AnalyticLink)
}
}
export default new MyPlugin()
展示Vue3写法:
插件没有严格定义的使用范围,但是插件发挥作用的常见场景主要包括以下几种:
通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
通过 app.provide() 使一个资源可被注入进整个应用。
向 app.config.globalProperties 中添加一些全局实例属性或方法
一个可能上述三种都包含了的功能库 (例如 vue-router)。
// Vue3项目
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import MyPlugin from '@plugin/my-plugin.js'
const app = createApp(App);
app.use(MyPlugin)
app.use(router);
app.mount('#app');
// 引入自定义的组件,app.component挂载到全局上
import AnalyticLink from '@component/AnalyticLink.vue'
class MyPlugin {
// 这个区域可以定义方法,app.prototype挂载到全局上
atRocity(row) { }
install(app, options) {
let pluginThis = this
// 1.绑定全局组件
app.component('AnalyticLink', AnalyticLink)
// 2. 添加全局自定义指令
app.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 逻辑...
}
// ...
})
// 3. globalProperties方式全局添加实例方法
app.config.globalProperties.$atRocity = function (...args) {
return pluginThis.atRocity(...args)
}
// 4.provide方式全局添加实例方法
app.provide('$atRocity', (...args)=> {
return pluginThis.atRocity(...args)
})
}
}
export default new MyPlugin()
<!-- about.vue -->
<template>
<div>about</div>
</template>
<script setup>
// 如下调用即可
import { inject } from 'vue'
const $atRocity = inject('$atRocity')
$atRocity()
</script>
如有不足,欢迎指正。
不要忽视你达成的每个小目标,它是你前进路上的垫脚石。冲!