前面的话

  本文将详细介绍Vue插件plugins的基本操作

开发插件

  插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种:

  1、添加全局方法或者属性,如: vue-custom-element

  2、添加全局资源:指令/过滤器/过渡等,如 vue-touch

  3、通过全局 mixin 方法添加一些组件选项,如: vue-router

  4、添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现

  5、一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router

  Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}

使用插件

  通过全局方法 Vue.use() 使用插件:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

  也可以传入一个选项对象:

Vue.use(MyPlugin, { someOption: true })

  Vue.use 会自动阻止注册相同插件多次,届时只会注册一次该插件

  Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在例如 CommonJS 的模块环境中,应该始终显式地调用 Vue.use()

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

  awesome-vue 集合了来自社区贡献的数以千计的插件和库

Vue插件plugins的基本操作的更多相关文章

  1. vue插件编写与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...

  2. 手把手教你写vue插件并发布(二)

    前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...

  3. 发布vue插件到npm上

    总体分为2个步骤 一,先写好插件 二,发布到npm上面 一,写vue插件 vue有一个开放的方法install,在vue插件需要写在这个方法里面,在vue官网,里面说的很清楚,这个方法里面可以是全局方 ...

  4. Vue插件配置和 后台交互

    Vue插件配置和 后台交互 一.全局配置静态文件(csss, js..) 1.1 全局配置css文件 创建css文件 在main.js配置css文件 // 配置全局css样式 // 方式一 impor ...

  5. 如何开发和发布一个Vue插件

    前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...

  6. webstorm安装vue插件及安装过程出现的问题

    想要编辑器识别vue文件需要安装vue插件 1. 安装方法: File--> setting  -->  plugin ,点击plugin,在内容部分的左侧输入框输入vue,会出现1个关于 ...

  7. 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...

  8. VUE插件大总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  9. vue插件大全汇总

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...

随机推荐

  1. binarySearch(int[] a,int fromIndex,int toIndex, int key)的用法

    package com.Summer_0420.cn; import java.util.Arrays; /** * @author Summer * binarySearch(int[] a,int ...

  2. Luogu P2056 [ZJOI2007]捉迷藏

    入坑动态点分治的题目,感觉还不错被卡常后重构代码 首先静态点分治相信大家肯定都会,就是不断找重心然后暴力计算每棵子树内的贡献. 这题如果只有单次询问,我们很容易想到对于每个分治中心的所以儿子的子树中找 ...

  3. SpringBoot开发案例之整合Dubbo分布式服务

    前言 在 SpringBoot 很火热的时候,阿里巴巴的分布式框架 Dubbo 不知是处于什么考虑,在停更N年之后终于进行维护了.在之前的微服务中,使用的是当当维护的版本 Dubbox,整合方式也是使 ...

  4. mybatis百科-列映射类ResultMapping

    目录 1 成员变量 2 构造函数 3 其他函数 3.1 setter 和 getter 函数 3.2 equals 和 hashCode 函数 3.3 toString 函数 4 内部类 Builde ...

  5. DIY——自制吸烟仪

    起因: 计划开始学电路相关知识,学习过程肯定离不开电烙铁,毕竟是在家弄,烟雾味道太大而且有毒.去某宝上搜一搜,一个吸烟仪动辄就得80 90米,就一个风扇一根管子一个壳子这个价格太贵了. 正好之前主机上 ...

  6. 如何查看IntelliJ IDEA的版本信息

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. IDEA的版本信息问题 额,说实在的,这篇文章十三一开始也不是很想整 ...

  7. Method not found: !!0[] System.Array.Empty()错误

    最近由于公司项目需要将之前支持的TLS1.0改成更安全的TLS1.2,而公司现有项目都是老系统,有的是.NET FrameWork 4.0,有的是.NET FrameWork3.5,但是TLS1.2默 ...

  8. 设计模式之单例模式(C#)

    本文来自于本人个人微信公众号,欢迎关注本人微信公众号,二维码附在文章末尾~~~ 一直都特别羡慕能写文章的人,但是由于本人比较懒再加上写文章功底实在是just so so,所以就一搁再搁,最近突然觉得自 ...

  9. 多项式求值 n维多项式 Horner解法

    #include<iostream> using namespace std; template<class T> T ploy(T *coeff,int n,const T& ...

  10. 2017湘潭大学邀请赛H题(树的直径)

    链接:https://www.icpc.camp/contests/4mYguiUR8k0GKE H. Highway The input contains zero or more test cas ...