Vue插件开发入门
相对组件来说,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插件开发入门的更多相关文章
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- Chrome插件开发入门(二)——消息传递机制
Chrome插件开发入门(二)——消息传递机制 由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...
- vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- vue从入门到女装??:从零开始搭建后台管理系统(二)用vue-docute生成线上文档
教程 vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架 一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如: vue-docu ...
- Vue.js入门系列(一)
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue.js入门(一)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
- VUE从入门到放弃(项目全流程)————VUE
VUE从入门到放弃(第一天)--整体流程 先想想一个项目,vue项目是从什么到什么,然后再什么的?那是什么呢? 搭建 ( vue-cli) 代码内容 运行 封装 成品 一.搭建(脚手架vue-cli) ...
随机推荐
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- Unity3d入门 - 关于unity工具的熟悉
上周由于工作内容较多,花在unity上学习的时间不多,但总归还是学习了一些东西,内容如下: .1 根据相关的教程在mac上安装了unity. .2 学习了unity的主要的工具分布和对应工具的相关的功 ...
- 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题
最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...
- 【声明】前方不设坑位,不收费!~ 我为NET狂官方学习计划
发个通知,过段时间学习计划相关的东西就出来了,上次写了篇指引文章后有些好奇心颇重的人跟我说:“发现最近群知识库和技能库更新的频率有点大,这是要放大招的节奏啊!” 很多想学习却不知道如何规划的人想要一个 ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- C#与C++通信
# C#与C++相互发送消息 # ## C#端: ## namespace CshapMessage { /// /// MainWindow.xaml 的交互逻辑 /// public partia ...
- App 审核由于 IPv6 网络问题被拒
昨天 提交App Store 的时候被拒了 We discovered one or more bugs in your app when reviewed on iPhone running iOS ...
- 在将 varchar 值 'xinpian' 转换成数据类型 int 时失败?
把int类型的值修改为varchar类型的值
- Java中的进程和线程
Java中的进程与线程 一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是 ...
- .NET跨平台之旅:将示例站点升级至 .NET Core 1.1 Preview 1
今天微软发布了 .NET Core 1.1 Preview 1(详见 Announcing .NET Core 1.1 Preview 1 ),紧跟 .NET Core 前进的步伐,我们将示例站点 h ...