插件是什么？
插件是自包含的代码，通常想Vue添加全局级功能。它可以是公开install()方法的object，也可以是function
插件的功能有哪些？
- 添加全局方法或者property。
- 添加全局资源：指令/过滤器/过渡等。
- 通过全局混入来添加一些组件选项。比如vue-router
- 添加全局实例方法，通过把它们添加到
config.globalProperties上实现。 - 一个库，提供自己的API，同时提供上面提到的一个或多个功能。比如vue-router
编写插件
为了更好地去理解如何创建自己的Vue.js插件，我们将编写一个简化版的i18n插件
每当这个插件被添加到应用程序中时，如果它是一个对象，就会调用 install 方法。如果它是一个 function，则函数本身将被调用。在这两种情况下——它都会收到两个参数：由 Vue 的 createApp 生成的 app 对象和用户传入的选项。
从设置插件对象开始。建议在单独的文件中创建它并将其导出，如下代码所示，以保持包含的逻辑和分离的逻辑。
// src\plugins\i18n.js
export default {
// 参数app：由Vue的creatApp生成的app
// 参数options：用户传入的选项
install: (app, options) => {
// 插件功能实现的代码
}
};
我们想要一个函数来翻译整个应用程序可用的键，因此我们将使用app.config.globalProperties暴露它。
该函数接受一个key字符串，我们将使用它在用户提供的选项中查找转换后的字符串。
// src\plugins\i18n.js
export default {
// 参数app：由Vue的creatApp生成的app
// 参数options：用户传入的选项
install: (app, options) => {
app.config.globalProperties.$translate = key => {
return key.split(`.`).reduce((o, i) => {
if (o) return o[i];
}, options);
};
}
};
我们假设用户使用插件时，将在options参数中传递一个包含翻译后的对象。我们的$translate函数将使用诸如greeting.h1之类的字符串，查看用户提供的配置内部并返回转换后的值Hello!
如：
greetings: {
h1: `Hello!`
}
vue3的插件写法，还允许我们使用inject为插件的用户提供功能或attribute。例如，我们把app访问options参数以能够使用翻译对象。
// src\plugins\i18n.js
export default {
// 参数app：由Vue的creatApp生成的app
// 参数options：用户传入的选项
install: (app, options) => {
console.log(options);
app.config.globalProperties.$translate = key => {
return key.split(`.`).reduce((o, i) => {
if (o) return o[i];
}, options);
};
app.provide(`i18n`, options);
}
};
插件用户现在可以将inject['i18n']到他们的组件并访问翻译对象
另外，由于我们可以访问app对象，因此插件可以使用所有其他功能，例如使用mixin和directive。
要了解有关createApp和应用程序实例的更多信息，请查看Application API 文档
// src\plugins\i18n.js
export default {
// 参数app：由Vue的creatApp生成的app
// 参数options：用户传入的选项
install: (app, options) => {
console.log(options);
app.config.globalProperties.$translate = key => {
return key.split(`.`).reduce((o, i) => {
if (o) return o[i];
}, options);
};
app.provide(`i18n`, options);
app.directive('my-directive', {
bind(el, binding, vnode) {},
inserted(el, binding, vnode) {},
update(el, binding, vnode, oldVnode) {},
componentUpdated(el, binding, vnode) {},
unbind(el, binding, vnode) {},
});
}
};
使用插件
在使用createApp()初始化Vue应用程序后，你可以通过调用use()方法将插件添加到你的应用程序中。
use()方法有两个参数
- 要安装的插件，如下为
i18nPlugin - 第二个参数时可选的，用户传入的options
其次要注意的是，它会自动阻止你多次使用同一个插件，因此在同一个插件上多次调用只会安装一次该插件。
import { createApp } from 'vue';
import App from './App.vue';
import './index.css';
import i18nPlugin from './plugins/i18n';
const app = createApp(App);
const i18nStrings = {
greetings: {
h1: `Hello!`
}
};
// 插件的参数options：就是i18nStrings，用户传过来的值
app.use(i18nPlugin, i18nStrings);
app.mount('#app');
再编写了一个后台权限检测插件
// permission.js
import store from '@/store'
/**
* @param {Array} value
* @returns {Boolean}
* @example see @/views/permission/directive.vue
*/
export default {
install: (app) => {
app.config.globalProperties.checkPer = value => {
if (value && value instanceof Array && value.length > 0) {
const roles = store.getters && store.getters.roles
const permissionRoles = value
return roles.some(role => {
return permissionRoles.includes(role)
})
} else {
console.error(`need roles! Like v-permission="['admin','editor']"`)
return false
}
}
}
}
