首先创建一个vue-cli搭建起来的vue项目这个不用多说了。

安装axios,使用npm install axios --save命令安装依赖,这时候项目的package.json文件中的"dependencies"属性会有个"axios"和它的版本号就说明

安装成功了

接下来就在项目中的src下面的assets文件里创建一个js文件夹,在js文件夹里创建俩个文件,一个是api.js,另一个是config.js,当然创建的文件夹和文件的名字随意起的

其中在config.js文件里写上你的后台的接口前半部分相同的url,然后用export导出去

然后在api.js里配置信息

import Vue from 'vue'  //引入vue
import axios from 'axios' //引入axios
import {axiosUrl} from './config' //引入配置的公共接口url
axios.defaults.baseURL = axiosUrl; //axios的基地址
Vue.prototype.$http = axios //挂载axios到vue原型的$http属性下 Object.assign(Vue.prototype,{ //vue的原型合并axios和axiosUrl
_ajax : axios ,
_api : axiosUrl
})

然后在项目的main.js里引入你配置的那些

配置完毕,现在想在项目中使用axios调用接口

this._ajax({ //在api.js后面合并的axios属性名_ajax一致,名字随意
url:this._api + 'getNum', //基地址加上后面不同的url地址
method:'POST',
timeout:6000,
params:{}
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})

这样就可以不用在每个接口里都写全部地址,便于后期维护,更方便的使用axios。

封装axios在vue-cli项目中便捷使用的更多相关文章

  1. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  2. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  3. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  4. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  5. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  6. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  7. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  8. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  9. 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)

    通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...

随机推荐

  1. centos7编译安装Python3所需要的库(模块)依赖

    在centos中编译安装python3环境,第三方的库 实战的编辑环境: 1.VMware虚拟机   2.centos7 依赖包经过百度搜集以及之前安装Python3报错搜集(centos7反反复复安 ...

  2. python摸爬滚打之day17----类与类之间的关系

    1.类与类之间的联系 1.1  依赖关系 类A中使用了类B, 类B作为参数传进类A的方法中被使用. 这种关系中类与类之间的联系是最轻的. class Elephant: def open(self,e ...

  3. js数组代码库

    1 数组操作 1.1 数组去重:ES6的方法 //ES6新增的Set数据结构,类似于数组,但是里面的元素都是唯一的 ,其构造函数可以接受一个数组作为参数 //let arr=[1,2,1,2,6,3, ...

  4. Centos7.1环境下搭建SVN

    环境准备: 系统 配置 IP Centos7.1 1核2G+60GB硬盘 10.10.28.204 1.安装 sudo yum install subversion 查看版本 svnserve –-v ...

  5. java框架之MyBatis(1)-入门&动态代理开发

    前言 学MyBatis的原因 1.目前最主流的持久层框架为 Hibernate 与 MyBatis,而且国内公司目前使用 Mybatis 的要比 Hibernate 要多. 2.Hibernate 学 ...

  6. VS2015 新建 ASP.NET Web应用程序, 此模板尝试加载程序集‘Microsoft.VisualStudio.Web.Project’, 解决方案

    下载并安装Azure的SDK即可:

  7. Windows平台搭建Kafka

    1. 安装JDK 1.1 安装文件:http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.htm ...

  8. 《linux就该这么学》开课,linux之路新开始

    今天开课第一天,虽然不会有实实在在的干货知识,只要是了解一下linux和认证.所以我也简单说一下我的linux之路 linux我是无意接触到的,因为工作,我接触的服务器较多,但是都是linux系统,记 ...

  9. C#-MVC-Razor视图引擎及解决路径问题的三个方法

    Razor 视图引擎 与Aspx开发区别在于代码: 1.Razor 更智能,摒弃了<%%>格式,直接用@符号开启cs代码,遇到html时自动识别 2.遇到如汉字等即非cs代码,又非html ...

  10. Python select实现socket并发

    Python select  Python的select()方法直接调用操作系统的IO接口,它监控sockets,open files, and pipes(所有带fileno()方法的文件句柄)何时 ...