最近用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() ,所以在每个 .vue 文件中使用 axios 时就需要 import.vue 文件少的话还好说,多的话未免有点麻烦。

后来想了想,能不能直接把 axios 加到 Vue 的原型中,这样就达到了全局注册了。

1. 首先在 main.js 中引入 axios
import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
el: '#app',
render:h => h(App)
})

2. 在 .vue 文件中使用时,注意 axios 前要加 this

<script>
export default {
name:'app',
data(){
return{
msg:'hello'
}
},
methods:{
send(){
// 注意:因为 axios 是加到 Vue 的原型中了,所以使用 axios 方法时,前面需要加 this
this.axios.get('https://www.baidu.com*******')
.then(resp => {
console.log(resp.data)
}).catch(err => {
console.log(err);
})
}
}
}
</script>

转: https://www.jianshu.com/p/12ede8685eea

Vue的axios如何全局注册的更多相关文章

  1. vue组件局部与全局注册的区别

    //局部注册 var mycomponent = new extend({        <!--Vue.extend()是Vue构造器的扩展,调用Vue.extend()我们将创建一个组件构造 ...

  2. vue项目组件的全局注册

    在vue-cli项目中,我们经常会封装自己的组件,并且要在多个界面中引用它,这个时候就需要全局注册组件. 首先我们会封装自己的组件,比如twoDimensionTable文件夹下的index.vue: ...

  3. 第七十一篇:Vue组件的私有和全局注册

    好家伙, 1.组件的父子关系 我们封装三个组件,分别为left组件,right组件和App组件 在封装时: 在封装时,彼此的关系是独立的,并不存在父子关系 在使用时: 在使用时,根据彼此的嵌套关系,形 ...

  4. [Vue]使用axios实现ajax请求

    1.定义myAjax export const myAjax=function createHttpClient(ajaxConfig) {   let httpClient = null;   if ...

  5. Vue 局部组件和全局组件的使用

    <template> <div id="app"> <!--<img alt="Vue logo" src="./ ...

  6. NO--09今天遇到的一点小问题之axios全局注册

    今天用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() ,所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说, ...

  7. Vue 全局注册逐渐 和 局部注册组件

    //定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...

  8. vue 组件 全局注册和局部注册

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...

  9. vue全局注册与局部注册的写法

    vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...

随机推荐

  1. Linux 知识

    linux下如何查看某软件是否已安装 因为linux安装软件的方式比较多,所以没有一个通用的办法能查到某些软件是否安装了.总结起来就是这样几类: 1.rpm包安装的,可以用rpm -qa看到,如果要查 ...

  2. 【DevOps】在Rancher2中启动Docker-Registry仓库服务

    准备 拥有Rancher2环境,已经在Rancher2配置Kubernetes集群 拥有域名,拥有SSL证书,可以自行在阿里云申请 启动Docker-Registry仓库服务 第一步:进入集群应用 第 ...

  3. Java【tomcat】配置文件

    Tomcat(二):tomcat配置文件server.xml详解和部署简介   分类: 网站架构   本文原创地址在博客园:https://www.cnblogs.com/f-ck-need-u/p/ ...

  4. AD 复制状态检查

      微软提供了一下工具进行AD复制状态检查 Repadmin: http://technet.microsoft.com/en-us/library/cc811551%28v=ws.10%29.asp ...

  5. 无线热点登陆认证原理探究---captive portal 什么是Captive Portal

    什么是Captive Portal 大家肯定都连过公共场所的wifi热点,比如麦当劳等地方的.他们的wifi往往一连上去就会弹出一个要求登录或者微信关注之类的页面,只有在这个页面完成操作了才能正常访问 ...

  6. 2019-ACM-ICPC-南昌区网络赛-H. The Nth Item-特征根法求通项公式+二次剩余+欧拉降幂

    2019-ACM-ICPC-南昌区网络赛-H. The Nth Item-特征根法求通项公式+二次剩余+欧拉降幂 [Problem Description] ​ 已知\(f(n)=3\cdot f(n ...

  7. MCUXpresso IDE:导入Kinetis Design Studio工程

    我的许多当前活跃的工程都在使用恩智浦的Kinetis Design Studio(KDS)V3.2.0(我在GitHub上发表了许多工程). 现在随着MCUXpresso IDE的出现(参见“MCUX ...

  8. linux网络编程之system v信号量(二)

    今天迎来元旦假期的最后一天了,过得好快~昨天跟小伙伴们在军都滑雪陪儿爽,虽说上了两回中级道都摔得异常的惨烈,但是在初级道上学习"s"转弯还是有一些小心得,可以在要往高手迈进的前提, ...

  9. 让你弄懂 call、apply、bind的应用和区别

    call.apply.bind使用和区别 // 有只猫叫小黑,小黑会吃鱼 const cat = { name: '小黑', eatFish(...args) { console.log('this指 ...

  10. prometheus-alertmanager告警推送到钉钉

    1. Prometheus告警简介 告警能力在Prometheus的架构中被划分成两个独立的部分.如下所示,通过在Prometheus中定义AlertRule(告警规则),Prometheus会周期性 ...