插件随笔

随着使用 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