1、插件的作用

  • 插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等
  • Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
  • 通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.

2、开发插件并且使用

在项目目录下创建plugins.js文件，用于写入插件内容

(function () {

  const MyPlugin = {} //声明一个插件对象

  MyPlugin.install = function (Vue, options) {

    // 1. 添加全局方法或属性

    Vue.myGlobalMethod = function () {

      alert("添加全局方法或属性")

    }

    // 2. 添加全局资源

    Vue.directive('my-directive', {

      inserted: function (el, binding) {

        el.innerHTML = binding.value

      }

    })

    // 3. 注入组件选项

    Vue.mixin({

      created: function () {

        // 逻辑...

      }

    })

    // 4. 添加实例方法，可以传参

    Vue.prototype.$myMethod = function () {

      alert('添加实例方法')

    }

  }

  // 将插件添加到 window 对象中

  window.MyPlugin = MyPlugin

})()

在index.html中进行引入，并且使用：

  • 引入文件
<script src="./plugins.js"></script>
  • 通过全局方法 Vue.use() 使用插件
Vue.use(MyPlugin)
  • 使用
<!DOCTYPE html>

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <button v-my-directive="msg"></button> <!--使用指令-->

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script src="./plugins.js"></script>

<script>

  Vue.use(MyPlugin)

  var vm = new Vue(

    {

      el: '#app',

      data: {

        msg: 'hello'

      },

      // 在 `methods` 对象中定义方法

      methods: {

      }

    }

  )

  //调用自定义的全局方法,Vue 调用

  Vue.myGlobalMethod()

  // 调用 Vue 实例方法，vm实例调用

  vm.$myMethod()

</script>

</body>

</html>

3、axios插件化

axios用于发送请求，但是在项目中时常需要引入，可以利用插件，做成全局的插件，这样不需要每一个页面都进行引入

  • 在项目目录下建立对应的插件文件

  • 写对应的实例方法
import axios from 'axios'

const MyHttpServer = {}

MyHttpServer.install = (Vue) => {

  axios.defaults.baseURL = 'http://127.0.0.1:8000/api/'

  //添加实例方法

  Vue.prototype.$http = axios

}

export default MyHttpServer
  • 在main.js中全局导入
import MyHttpServer from '@/plugins/http'

Vue.use(MyHttpServer)
  • 在需要的地方可以进行使用了
 this.$http.post('addUser',data)

vue之自定义插件的更多相关文章

  1. 浅析vue封装自定义插件

    在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装 ...

  2. webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...

  3. Vue学习之--------Vue中自定义插件（2022/8/1）

    文章目录 1.插件的基本介绍 2.实际应用 2.1 目录结构 2.2 代码实例 2.2.1 学校组件(School.vue) 2.2.2 学生组件(Student.vue) 2.2.3 定义的插件 2 ...

  4. vue中自定义组件（插件）

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  5. vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...

  6. vue自定义插件封装，实现简易的elementUi的Message和MessageBox

    vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template>     <transition  ...

  7. 如何用uniapp+vue开发自定义相机插件——拍照+录像功能

    调用手机的相机功能并实现拍照和录像是很多APP与插件都必不可少的一个功能,今天智密科技就来分享一下如何基于uniapp + vue实现自定义相机界面,并且实现: 1: 自定义拍照 2: 自定义录像 3 ...

  8. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  9. vue（5）—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

随机推荐

  1. JS鼠标提示框效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Android消息处理：EventBus、BroadCast和Handler-优缺点比较

    上一篇研究了EventBus的使用方法,但随之而来的一系列问题也是值得思考,EventBus到底给项目带来了什么?它与Android原有的消息处理机制有什么区别和优缺点?项目在什么场景下采用Event ...

  3. Nginx+Keepalived高可用集群应用实践

    Nginx+Keepalived高可用集群应用实践 1.Keepalived高可用软件 1.1 Keepalived服务的三个重要功能 1.1.1管理LVS负载均衡软件 早期的LVS软件,需要通过命令 ...

  4. redis实现分布式锁需要考虑的因素以及可重入锁实现

    死锁 错误例子 解决方式  防止死锁 通过设置超时时间  不要使用setnx key   expire 20  不能保证原子性 如果setnx程序就挂了 没有执行expire就死锁了  reidis2 ...

  5. 删除DataFrame中特定条件的行/列

    在<Python进行数据分析与挖掘实战>一书中,第10章 删除热水器不工作的数据(水流量为0并且开关机状态为“关”的数据.) import pandas as pd data=pd.rea ...

  6. springMVC+freemarker整合

    转自:http://angelbill3.iteye.com/blog/1980904 在springMVC的项目中,加入freemarker 1.首先导入springMVC-webmvc所需的JAR ...

  7. MySQL不支持事务处理的解决方法

    MySQL数据库默认的存储引擎类型是MyISAM,这种存储引擎类型不支持事务处理. 在MySQL中,只有InnoDB存储引擎类型的数据表才能支持事务处理. 因此,如果想让MySQL支持事务处理,只要将 ...

  8. 理解First-Class Functions

    def logger(msg): def log_message(): print('Log:', msg) return log_message # 返回的是函数 log_hi = logger(' ...

  9. 基于.Net4.0实现 ToastNotification

    基于.Net4.0实现 ToastNotification Windows更新之路的特色之一就是消息提示由气泡变成了通知窗口,效果简直不要太好.最近公司有这方面的需求,需要在xp,win7系统上给出提 ...

  10. PHP ftp_chmod() 函数

    定义和用法 ftp_chmod() 函数设置 FTP 服务器上指定文件的权限. 如果成功,该函数返回新的权限.如果失败,则返回 FALSE 和一个警告. 语法 ftp_chmod(ftp_connec ...