相对组件来说,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. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  2. Unity3d入门 - 关于unity工具的熟悉

    上周由于工作内容较多,花在unity上学习的时间不多,但总归还是学习了一些东西,内容如下: .1 根据相关的教程在mac上安装了unity. .2 学习了unity的主要的工具分布和对应工具的相关的功 ...

  3. 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

  4. 【声明】前方不设坑位,不收费!~ 我为NET狂官方学习计划

    发个通知,过段时间学习计划相关的东西就出来了,上次写了篇指引文章后有些好奇心颇重的人跟我说:“发现最近群知识库和技能库更新的频率有点大,这是要放大招的节奏啊!” 很多想学习却不知道如何规划的人想要一个 ...

  5. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  6. C#与C++通信

    # C#与C++相互发送消息 # ## C#端: ## namespace CshapMessage { /// /// MainWindow.xaml 的交互逻辑 /// public partia ...

  7. App 审核由于 IPv6 网络问题被拒

    昨天 提交App Store 的时候被拒了 We discovered one or more bugs in your app when reviewed on iPhone running iOS ...

  8. 在将 varchar 值 'xinpian' 转换成数据类型 int 时失败?

    把int类型的值修改为varchar类型的值

  9. Java中的进程和线程

     Java中的进程与线程 一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是 ...

  10. .NET跨平台之旅:将示例站点升级至 .NET Core 1.1 Preview 1

    今天微软发布了 .NET Core 1.1 Preview 1(详见 Announcing .NET Core 1.1 Preview 1 ),紧跟 .NET Core 前进的步伐,我们将示例站点 h ...