如何开发 Vue 插件?

442 阅读2分钟

项目由 cli 3+创建

Element、bootstrapVue 它们都是非常优秀的 vue 插件,如果我们也想参与插件开发那要怎么做呢?

Vue.use( plugin ) 注册插件


//引自官方apiVue.use( plugin )参数:{Object | Function} plugin用法:安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当 install 方法被同一个插件多次调用,插件将只会被安装一次。


可以看到官方概念解释的是挺清楚了,下面看个实例,来真正掌握它。

看下项目的目录,这不是非得跟我一样。


项目目录

这是最终实现的效果图

带着事物最终的样子去写代码,会让你在前进的道路上,走得更远一些!

最终效果图,麻雀虽小,五脏俱全


下面是位于相关文件里的代码实现:



在 main.js 文件中注册我们的定义好的插件


然后我们可以在我们的项目中进行应用。

下面在App.vue文件中应用:

最终得到了位置网页中央的创世按钮

总结

创世按钮插件完成了,让我们再来理下思路:
  • 创建一个插件(组件)
  • 给该插件添加一个install方法,install方法里编写相关的注册逻辑,比如:把该插件注册为全局组件,这样就可以在整个项目中使用了。
  • 在实例化Vue前,使用Vue.use(插件) 注册你的插件。

One more thing

创世按钮插件是已经完成了,但怎么让它应用于npm呢?你需要把它发布到npm上,这样全世界的人都可以用你开发出来的插件了,如果你不会如何发布的话,请到文章下留言,我会视情况而定撰写相关教程。

                                           公众号回复 加群
                                  进群和大佬们交流技术吧

微信公众号: 我的web前端自救之路

回复 加群 ,跟大佬们一起交流技术吧