Vue插件开发入门

最新推荐文章于 2024-06-19 10:24:47 发布

weixin_33709590

最新推荐文章于 2024-06-19 10:24:47 发布

阅读量87

点赞数

文章标签： javascript webpack ViewUI

相对组件来说，Vue 的插件开发受到的关注要少一点。但是插件的功能是十分强大的，能够完成许多 Vue 框架本身不具备的功能。

大家一般习惯直接调用现成的插件，比如官方推荐的 vue-router、vue-touch 等。

下面就看一下 Vue 的插件开发如何入门。

首先我们简单回顾一下 Vue.js 官方文档中对于插件开发的描述。

Vue 的插件必须提供一个公开方法 install，该方法会在你使用该插件，也就是 Vue.use(yourPlugin) 时被调用，相当于是一个插件的注册或者声明。install 接受 Vue 构造器作为第一个参数，并且有一个可选的选项对象作为第二个参数，比如：

yourPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = ...
  // 2. 添加全局资源 Vue.directive('my-directive', {}) // 3. 添加实例方法 Vue.prototype.$myMethod = ... }

插件在使用时有两种方式：

第一种是如上述提到的，可以通过 Vue.use(yourPlugin) 全局方法进行调用。
进行 Vue 的大型项目开发时，如果用 vue-cli 生成项目目录结构，Vue.use() 方法一般在 main.js 中调用。

第二种实际上是插件本身帮你完成了 Vue.use()的调用。
这种情况下，插件会去检测是否存在 Vue 全局变量，如果存在，就自动调用 Vue.use()。所以，如果你的项目中是使用 script 方式引入的 Vue.js（这种情况下 Vue 才会作为一个全局变量存在），在使用比如 vue-router 之类的插件时就可以直接引入然后使用，不用再调用 Vue.use()。
但是，在模块环境下应当始终显式调用该方法，以保证插件可以正常使用：

// 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块
var Vue = require('vue')
var VueRouter = require('vue-router') // 不要忘了调用此方法 Vue.use(VueRouter) // 或者可以多传入一个选项对象 // Vue.use(VueRouter, { hashbang: true })

接下来我们看一下一些官方的常用插件的实现，我们配合去除具体逻辑的源码进行一些解读：

1、vue-touch

// version: 1.1.0
// vue-touch.js
var vueTouch = {}
// 暴露出的全局配置项，也就是在调用 Vue.use(Vue, options) 时传入的第二个选项参数
vueTouch.config = {}
// 核心部分，插件的具体逻辑均在此实现 vueTouch.install = function (Vue) { Vue.directive('touch', { bind: function () { }, update: function () { }, unbind: function () { } }) } // 支持 CommonJS if (typeof exports == "object") { module.exports = vueTouch // 支持 AMD } else if (typeof define == "function" && define.amd) { define([], function(){ return vueTouch }) // Vue 是全局变量时，自动调用 Vue.use() } else if (window.Vue) { window.VueTouch = vueTouch Vue.use(vueTouch) }

2、vue-router

// version: 0.7.13
// src/index.js
let Vue
// 封装为 ES6 class
class Router { // 可传入全局配置项 constructor({ hashbang = true, abstract = false, history = false, saveScrollPosition = false, transitionOnLoad = false, suppressTransitionError = false, root = null, linkActiveClass = 'v-link-active' } = {}) { // ... } } // 避免重复 install，设立 flag Router.installed = false Router.install = function (externalVue) { if (Route.installed) { return } Vue = externalVue // install 的具体逻辑，此处省略 // ... // install 完毕 Router.installed = true } // 同样，Vue 作为全局变量时自动 install if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(Router) } export default Router

3、vue-resource

// version: 1.0.3
// src/index.js
// install 方法
function plugin(Vue) { if (plugin.installed) { return; } // 插件核心逻辑，此处省略 // ... } // 同上，Vue 是全局变量时，自动 install if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(plugin); } export default plugin;