项目由 cli 3+创建
Element、bootstrapVue 它们都是非常优秀的 vue 插件,如果我们也想参与插件开发那要怎么做呢?
Vue.use( plugin ) 注册插件
//引自官方api
Vue.use( plugin )
参数:
{Object | Function} plugin
用法:
安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。
如果插件是一个函数,它会被作为 install 方法。
install 方法调用时,会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用,插件将只会被安装一次。
可以看到官方概念解释的是挺清楚了,下面看个实例,来真正掌握它。
看下项目的目录,这不是非得跟我一样。
![cba99f00cce9728772cb68f6a4528e28.png](https://i-blog.csdnimg.cn/blog_migrate/899da71ff2e2e79baafc313932e8c8bc.jpeg)
项目目录
这是最终实现的效果图,带着事物最终的样子去写代码,会让你在前进的道路上,走得更远一些!
![578592b4f6af58a675e4be9cbc38fe7c.png](https://i-blog.csdnimg.cn/blog_migrate/5db868388a149f614ed16f033ae5e23a.jpeg)
最终效果图,麻雀虽小,五脏俱全
下面是位于相关文件里的代码实现:
![5be93890ad9d22dfb2efde8ba3554261.png](https://i-blog.csdnimg.cn/blog_migrate/f36cbed19428aa3b7f9af3ffc71dbc38.jpeg)
![7314eab1ef426ee02cf7707b1ba8711c.png](https://i-blog.csdnimg.cn/blog_migrate/4c38c6a313ed1b1363028034e6665c3b.jpeg)
在 main.js 文件中注册我们的定义好的插件
![6cf957bf8960c083499716849a55ded3.png](https://i-blog.csdnimg.cn/blog_migrate/92b93fb8eb76b80c05026d36448b3a74.jpeg)
然后我们可以在我们的项目中进行应用。
下面在App.vue文件中应用:
![700ce77cd4705b08bb6c55f9a3489564.png](https://i-blog.csdnimg.cn/blog_migrate/4642dce87e5033c89936d915c4f8b736.jpeg)
最终得到了位置网页中央的创世按钮
。
总结
创世按钮插件完成了,让我们再来理下思路:
- 创建一个插件(组件)
- 给该插件添加一个install方法,install方法里编写相关的注册逻辑,比如:把该插件注册为全局组件,这样就可以在整个项目中使用了。
- 在实例化Vue前,使用Vue.use(插件) 注册你的插件。
One more thing
创世按钮插件是已经完成了,但怎么让它应用于npm
呢?你需要把它发布到npm
上,这样全世界的人都可以用你开发出来的插件了,如果你不会如何发布的话,请到文章下留言,我会视情况而定撰写相关教程。
公众号回复 加群 进群和大佬们交流技术吧
![39610749cc43cad8b36e21cc7cdc1dd5.png](https://i-blog.csdnimg.cn/blog_migrate/f0790d156a39a3ec22ba9b57caf7fbea.jpeg)
微信公众号: 我的web前端自救之路
回复 加群 ,跟大佬们一起交流技术吧
![87f31ad33bf3007eea41f07a58881a05.png](https://i-blog.csdnimg.cn/blog_migrate/0160c494455bf682d336f0bf8bd323e8.png)