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. 【javascript闭包】转载一篇不错的解释，也有几个大牛的链接

    初学闭包时一直以为很简单.但伴随对一个问题深入学习后,才算真正理解了闭包,同时也发现连<<JavaScript高级程序设计>>中都些不准确的地方. 我不准备从头介绍闭包的概念, ...

  2. input | button | textarea 元素的checked, disabled，hidden属性控制

    这三种元素涉及到的checked, disabled,hidden属性的控制方法如下 一.attribute方法: //以下3行,都会影响HTML的( checked | disabled | hid ...

  3. JavaScript性能优化之摇树

    作者|Jeremy Wagner译者|薛命灯 现代 Web 应用程序可能会变得非常巨大,特别是它们的 JavaScript 部分.HTTP Archive 网站的数据显示,截至 2018 年中,传输到 ...

  4. nodejs模块——fs模块 使用fs.write读文件

    fs.write() fs.read(fd,buffer,offset,length[,position],callback(err,bytesWritten,buffer))接收6个参数. 参数说明 ...

  5. 使用navigator.userAgent来判断浏览器类型

    var br=navigator.userAgent.toLowerCase(); var browserVer=(br.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ...

  6. Python 直接赋值、浅拷贝和深度拷贝区别

    Python 直接赋值.浅拷贝和深度拷贝区别 转自https://www.runoob.com/w3cnote/python-understanding-dict-copy-shallow-or-de ...

  7. 8、iota枚举

    1.iota常量自动生成器,每一行,自动累加1 2.iota给常量赋值使用 3.如果iota遇到const,就会重置为0 4.可以可以只写一个iota 5.如果是同一行,值是一样的 // 09_iot ...

  8. 【LeetCode 9】回文数

    题目链接 [题解] 还是要注意,取反的时候,-2^31 取反的话会爆掉Int..(因为int的正数最多到2^31-1) [代码] class Solution { public: bool isPal ...

  9. docker仓库管理(9)

    使用公共 Registry Docker Hub 是 Docker 公司维护的公共 Registry.用户可以将自己的镜像保存到 Docker Hub 免费的 repository 中.如果不希望别人 ...

  10. 巧用Wget快速建立文件下载中心

    Wget基本用法:1) 从网上下载单个文件 wget http://www.freehao123.com/file.iso 2) 下载一个文件,但以不同的名字存为本地文件 wget –output-d ...