随着使用 Vue.js 做项目，每天都是写组件，渐渐形成了这种思维，用 vue.js 的项目都是由路由和组件这两个重要部分组成，渐渐忽略了本身也是有插件这个概念的。那么 vue.js 中的组件是什么样子的，它都能干些什么，它和传统的DOM结构驱动的插件有何不同？
vue插件的使用
看过 vue.js 中文档的同学会发现它写的并不明确，反观英文文档就介绍的比较好。
使用 vue.js 插件需要暴漏一个 install 方法。这个方法将会被它的第一个参数（该参数是一个Vue的构造函数） Vue 调用，第二个参数是一个可选项对象。
写一个 vue.js 的插件就是将要执行的代码添加到 vue.js 上。
vue.js 插件使用方式
添加方法和属性到其构造函数上
添加方法和属性到其原型链上
借助于
vue.js暴露的 Vue.mixin() 和 Vue.directive() 方法
这两种方法使用的是纯原生的js写法
另外，也可以借助于 vue.js 暴漏的方法，将用 vue.js 语法写的指令或组件封装进来，在开发中有时就是使用这种方法，将一些特殊的功能封装成独立模块（像我们使用的Eelement-ui，Mint-ui等基于 vue.js 的库就是这样包装起来的），然后通过 Vue.use() 来引用。
注意：vue.js 插件的不同之处就是它结合 vue.js 自身的特性，可以将组件和指令这两个MVVM模块囊括进来。
vue.js 插件的实际应用
分析一下 Eelement-UI 组件库的 index.js 文件的代码：
/* Automatically generated by './build/bin/build-entry.js' */// 引入各个基础组件模块import Pagination from '../packages/pagination/index.js';import Dialog from '../packages/dialog/index.js';
...// 将引入的所有基础组件模块放在一个数组中，数组名为components，这样后面方便统一注册const components = [
Pagination,
Dialog,
...
];// 定义一个名字为install的 vue.js 插件const install = function(Vue, opts = {}) {
... // 遍历数组components，然后注册引入的所有组件
components.map(component => {
Vue.component(component.name, component);
});
...
// 给 vue.js 扩展自定义加载/消息提示/消息确认等小功能
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
Vue.prototype.$ELEMENT = ELEMENT;
};/* istanbul ignore if */if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}// 文件模块导出对象module.exports = { version: '2.3.7',
...
install, // 名为 install 的插件
CollapseTransition,
Loading,
...
};module.exports.default = module.exports;之所以，要将install插件和各个模块组件，都放在文件导出对象中，是为了按需引入组件苦衷的组件。
// 在应用仅引入loading，alert组件import {Loading, Alert} from 'element-ui'// 在本应用中全局注册所引入的组件Vue.component(Loading.name, Loading)
Vue.component(Alert.name, Alert)如果查看每个组件的出口文件源代码，会发现它们都被封装成为了一个 Vue.js 的插件，例如："./element/packages/alert/" 目录下的 index.js 文件，代码如下：
import Alert from './src/main';/* istanbul ignore next */Alert.install = function(Vue) {
Vue.component(Alert.name, Alert);
};export default Alert;之所以，要利用ES6语法实现 ‘组建模块文件——>插件模块文件——>组件文件’ 这样 ‘转过来，变过去’ ，是为了应用的模块化，方便项目的管理。
然后，就是熟悉ES6的模块的import和export。可参考阮一峰的ECMAScript 6 入门
后续可能还会继续修改，也欢迎各位批评指正。有问题或者有其他想法的可以在我的GitHub上pr。
作者：缘自世界
链接：https://www.jianshu.com/p/0e5f29832af9