介绍
Vue.js 插件是一种强大的但简单的方法来为您的应用程序添加全球功能,它们有各种用途,从分发应用程序的组件到添加额外的功能,如路由和不变的数据存储到您的应用程序。
在本文中,您将构建一个示例Vue自定义插件。
前提条件
要跟随这篇文章,你将需要:
- 对 [设置 Vue.js 项目] 的某些熟悉(https://v3.vuejs.org/guide/introduction.html)。
本教程已通过 Node v16.5.0、npm v6.14.8 和 vue v2.6.11 进行验证。
创建你的第一个插件
作为Vue插件的介绍,我们将写一个插件,每当一个组件安装到DOM时,它都会写给控制台。
1[label my-vue-plugin.js]
2const MyPlugin = {
3 // eslint-disable-next-line no-unused-vars
4 install(Vue, options) {
5 Vue.mixin({
6 mounted() {
7 console.log('Mounted!');
8 }
9 });
10 }
11};
12
13export default MyPlugin;
Vue 插件是一个具有安装方法的对象,需要两个参数:
- 全球
视图对象 *和包含用户定义的选项的对象
「Vue.mixin()」用于将功能注入到所有组件中,在这种情况下,当该组件被添加到DOM时,mounted()方法运行。
您的插件现在可以通过导入它并调用Vue.use(MyPlugin)来使用Vue应用程序:
1[label main.js]
2import Vue from 'vue'
3import MyPlugin from './my-vue-plugin.js'
4import App from './App.vue'
5
6Vue.use(MyPlugin)
7
8new Vue({
9 el: '#app',
10 render: h => h(App)
11});
你可能会想知道,为什么我不能通过在main.js中拨打Vue.mixin()来做到这一点? 原因是,由于我们正在向Vue添加全球功能,不会直接修改应用程序,所以几乎总是最好把它分成一个单独的模块,可以随意添加或删除。
增加能力
添加组件生命周期夹克或属性
正如上面的您的第一个插件示例中所描述的那样,您可以使用 Mixin来添加生命周期夹和对 Vue 组件进行其他修改。
<$>[注]
注: 混合物是一个相当先进的主题,目前这个文章的范围之外,一个足够的解释是,它们基本上是组件定义,被合并到其他组件(混合)中。
1[label my-vue-plugin.js]
2const MyPlugin = {
3 // eslint-disable-next-line no-unused-vars
4 install(Vue, options) {
5 Vue.mixin({
6 mounted() {
7 console.log('Mounted!');
8 }
9 });
10 }
11};
12
13export default MyPlugin;
安装 app-wide 组件和指令
如果你想包装组件或指令作为插件来分发,你可以写一些这样的东西:
1[label my-vue-plugin.js]
2import MyComponent from './components/MyComponent.vue'
3import MyDirective from './directives/MyDirective.js'
4
5const MyPlugin {
6 // eslint-disable-next-line no-unused-vars
7 install(Vue, options) {
8 Vue.component(MyComponent.name, MyComponent)
9 Vue.directive(MyDirective.name, MyDirective)
10 }
11};
12
13export default MyPlugin;
更改全球视图对象
您可以从插件中修改全球Vue对象:
1[label my-vue-plugin.js]
2const MyPlugin {
3 // eslint-disable-next-line no-unused-vars
4 install(Vue, options) {
5 Vue.myAddedMethod = function() {
6 return Vue.myAddedProperty
7 }
8 }
9};
10
11export default MyPlugin;
变更视觉实例
要将属性或方法直接添加到组件实例中,而无需任何注入机制,您可以如下所示修改视图``原型:
1[label my-vue-plugin.js]
2const MyPlugin {
3 // eslint-disable-next-line no-unused-vars
4 install(Vue, options) {
5 Vue.prototype.$myAddedProperty = 'Example Property'
6 Vue.prototype.$myAddedMethod = function() {
7 return this.$myAddedProperty
8 }
9 }
10};
11
12export default MyPlugin;
这些属性现在将被添加到所有组件和Vue实例中。
<$>[注]
**注:**在Vue社区中,通常预计修改Vue原型的插件会以美元符号($)预先定义任何添加的属性。
支持自动安装
对于那些在模块系统之外使用您的插件的人来说,如果您的插件在Vue脚本标签后被列入,则通常会自动安装,而无需调用Vue.use()。
1if (typeof window !== 'undefined' && window.Vue) {
2 window.Vue.use(MyPlugin)
3}
如果Vue已添加到全球范围时,自动安装。
发行您的 Plugin
一旦你寫了一個插件,你可以將它發布到社群. 如果你還不熟悉這個過程,這裡有幾個常見的步驟來幫助人們發現你的插件:
- 发布源代码和可分发的文件到
npm和 GitHub。 确保您为您的代码选择合适的许可证! - 打开官方Vue cool-stuff-discovery存储库的提取请求:
awesome-vue. 许多人来这里寻找插件 - (可选) 在 Vue Forum, Vue Gitter Channel和在推特上发表有关此事的标签为
#vuejs(# )
做一些插件吧!
结论
在本文中,您建立了一个示例Vue定制插件。