（十七）vue之插件开发及使用

(1)什么是vue插件

就像我们安装vscode的插件能给我们的vscode添加不同的功能一样。Vue的插件就是能够给vue添加新功能新特性的东西。

(2)Vue插件有什么用

插件通常会为 Vue 添加全局功能。

所谓全局：
即不需要像组件那样，每次使用他前都需要先引入一次。对于插件只要在最开始引入一次，在任何组件就可以直接使用。（类似于我们在window上添加的方法属性那样，任何地方都可以用）

插件能实现的功能没有限制，不过常见下面几种：

1.通过插件，添加全局方法或者属性
2.通过插件，添加全局资源：指令/过滤器/过渡等
3.通过插件(使用全局 mixin 方法)，添加一些组件选项
4.通过插件,添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5.一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

(3)如何开发自己的vue插件

1)概述

随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件.
现在我们就来学习下如何开发自己的插件(开发完后可发布到npm给全世界开发者使用）

2)插件原理

所谓vue插件其实就是一个简单的js对象而已，然后这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。
最会导出此插件对象以供别人使用，如下所示

//所谓vue的插件，就是一个js对象
const MyFirstPlug={
install:function(Vue,options){
       //这里写插件要实现的功能
}
}
export default MyFirstPlug; //导出给别人使用

然后别人使用我们的插件实际上就是执行我们这个插件对象中的install方法。

3)插件开发与使用流程

• 1.创建一个js文件来编写你的插件内容

这里我写的$testProp等加了$符号的，表示他为vue全局的，但实际上不加也可以的，访问时也不加就行了

• 2.在入口文件出导入此插件对象进行使用

使用Vue.use(插件名，可选参数)；方法就能实现插件的引入使用，但是请注意此方法的调用一定要放在new Vue( )之前，这样才能确保项目里面的所有组件都能访问到此组件。

然后这个方法的调用事件上只是执行插件对象中的那个install方法而已，这样让install方法中定义的东西全部都进入到vue中

如果你的项目没有使用webpack,那么请使用script标签引入此js插件文件，然后使用，方式是一样的。

• 3.Ok,现在整个项目的所有组件都可以使用整个插件提供的功能了

下图为我在sub_1中使用了此组件

(4)vue插件功能实现举例

①　通过插件，添加全局方法，实例方法，属性等。

这个也就是上面演示的那样，就不多说了，不过记住了这时添加到vue上的。

②　通过插件(使用全局 mixin 方法)，添加一些组件选项

运行结果

从中你应该能发现组件是由内而外进行渲染的。

如果你不想每个组件都运用上此混入，那么可以通过自定义选项来过滤某些组件，不给其添加相应功能。

③　通过插件，添加全局资源：指令/过滤器/过渡等

以指令为例，添加全局指令如下

运行结果

④　通过插件,提供整个项目的公用组件，让其他组件不需要引入就可以使用

1.定义公用组件

2.使用公有组件

3.结果

提示

1.上面那种方式是提供公有组件的最好方法，但是并不是只有这一中方法，下面这两种方式也可以：

> 方法一：使用render方法也可以返回公有组件 
> 方法二：使用前面学的以vue.extend方式创建组件，手动挂载组件的方式也可以的

。

但是下面这种直接创建组件的方式是不行的：

  Vue.component("TestCom", {
    template:'<div></div>';
    })

2.导入组件时无法直接按照特定名称导入，如export {name}
3.插件文件可以有多个。

4.在使用插件时，可传入参数进行定制化处理

(5)非webpack下自定义插件的使用