相对组件来说,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;

看完以上三个官方例子,相信各位已经对 Vue 的插件开发过程有了一定的了解,大家就可以根据自己的需要为 Vue 增加各种全局功能了。


欢迎关注DDFE
GITHUB:https://github.com/DDFE
微信公众号:微信搜索公众号“DDFE”或扫描下面的二维码

Vue插件开发入门的更多相关文章

  1. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  2. Chrome插件开发入门(二)——消息传递机制

    Chrome插件开发入门(二)——消息传递机制   由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...

  3. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  4. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  5. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  6. vue从入门到女装??:从零开始搭建后台管理系统(二)用vue-docute生成线上文档

    教程 vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架 一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如: vue-docu ...

  7. Vue.js入门系列(一)

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  8. Vue.js入门(一)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  9. VUE从入门到放弃(项目全流程)————VUE

    VUE从入门到放弃(第一天)--整体流程 先想想一个项目,vue项目是从什么到什么,然后再什么的?那是什么呢? 搭建 ( vue-cli) 代码内容 运行 封装 成品 一.搭建(脚手架vue-cli) ...

随机推荐

  1. Socket聊天程序——服务端

    写在前面: 昨天在博客记录自己抽空写的一个Socket聊天程序的初始设计,那是这个程序的整体设计,为了完整性,今天把服务端的设计细化记录一下,首页贴出Socket聊天程序的服务端大体设计图,如下图: ...

  2. Oracle 的基本操作符

    != 不等于 select empno,ename,job from scott.emp where job!='manager' ^= 不等于 select empno,ename,job from ...

  3. MSDN文档篇

    很多人网上下载3~10G不等的MSDN文档,发现,下载完成了不会用 很多人每次都得在线下载文档,手上万千PC,都重新下载不是得疯了? so==> 先看几张图 推荐一个工具:https://vsh ...

  4. PC分配盘符的时候发现==》RPC盘符不可用

    服务器汇总:http://www.cnblogs.com/dunitian/p/4822808.html#iis 服务器异常: http://www.cnblogs.com/dunitian/p/45 ...

  5. javascript中的继承与深度拷贝

    前言 本篇适合前端新人,下面开始...... 对于前端新手来说(比如博主),每当对js的对象做操作时,都是一种痛苦,原因就是在于对象的赋值是引用的传递,并非值的传递,虽然看上去后者赋值给了前者,他们就 ...

  6. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  7. ZKWeb网页框架1.1正式发布

    发行日志 https://github.com/zkweb-framework/ZKWeb/blob/master/ReleaseNotes/ReleaseNote.1.1.md 主要改动 添加EFC ...

  8. 【架构设计】分布式文件系统 FastDFS的原理和安装使用

    本文地址 分享提纲: 1.概述 2. 原理 3. 安装 4. 使用 5. 参考文档 1. 概述 1.1)[常见文件系统] Google了一下,流行的开源分布式文件系统有很多,介绍如下:   -- mo ...

  9. cesium自定义气泡窗口infoWindow

    一.自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说 ...

  10. Angular2 Hello World 之 2.0.0-beta.14

    公司现在采用angualrjs开发一些web应用,采用的是angular1,现在angular2已经差不多了,听说最近rc6已经出来了……其实感觉好慢啊!之前也做过一些anglar2的例子,但是没有记 ...