vue的使用步骤

1.创建vue脚手架
2.引入axios

1.axios的封装

1. npm install axios 注:在main.js引入
2. 我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
   3.import axios from 'axios'; import QS from 'qs'; // 使用element-ui Message做消息提醒 import { Message} from 'element-ui'; import store from '../store/index'

// 请求超时时间
axios.defaults.timeout = 10000;

// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器
axios.interceptors.request.use(
 config => {
  // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
  // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
  const token = store.state.token;  //获取token之后赋值

  token && (config.headers.Authorization = token);
  return config;
 },
 error => {
  return Promise.error(error);
 })

// 响应拦截器
axios.interceptors.response.use(
 response => {
  if (response.status === 200) {
   return Promise.resolve(response);
  } else {
   return Promise.reject(response);
  }
 },
 // 服务器状态码不是200的情况
 error => {
  if (error.response.status) {
   switch (error.response.status) {
    // 401: 未登录
    // 未登录则跳转登录页面，并携带当前页面的路径
    // 在登录成功后返回当前页面，这一步需要在登录页操作。
    case 401:
     router.replace({
      path: '/login',
      query: { redirect: router.currentRoute.fullPath }
     });
     break;
    // 403 token过期
    // 登录过期对用户进行提示
    // 清除本地token和清空vuex中token对象
    // 跳转登录页面
    case 403:
     Toast({
      message: '登录过期，请重新登录',
      duration: 1000,
      forbidClick: true
     });
     // 清除token
     localStorage.removeItem('token');
     store.commit('loginSuccess', null);
     // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
     setTimeout(() => {
      router.replace({
       path: '/login',
       query: {
        redirect: router.currentRoute.fullPath
       }
      });
     }, 1000);
     break;
    // 404请求不存在
    case 404:
     Toast({
      message: '网络请求不存在',
      duration: 1500,
      forbidClick: true
     });
    break;
    // 其他错误，直接抛出错误提示
    default:
     Toast({
      message: error.response.data.message,
      duration: 1500,
      forbidClick: true
     });
   }
   return Promise.reject(error.response);
  }
 }
);

然后会遇到跨域的问题:一般用的都是vue的反向代理

 proxyTable: {
      'api':{
        target:"http://56erp.56xiaoge.com/",//后端接口地址
        changeOrigin:true, //是否允许跨域
        pathRewrite:{
          '^/api':'api',//重写
        }
      }
    },