如何开发 Vue 插件？

项目由 cli 3+创建

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

Vue.use( plugin ) 注册插件

 

//引自官方api
Vue.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前端自救之路

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