1.安裝腳手架

cnpm install vue-cli -g //全局安裝vue-cli

2.新建項目

vue init webpack ”項目名稱“

3.運行項目

npm run dev

4.封裝axios

import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 90000;                        //響應時間
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置請求頭
if (process.env.NODE_ENV == 'production') { // 線上 正式發(fā)布環(huán)境
  // 線上測試環(huán)境
  if (process.env.type === 'test') {
    axios.defaults.baseURL = '//test.gsapi.icontinua.cn/sk/';//配置接口地址
    // 線上正式環(huán)境
  } else {
    axios.defaults.baseURL = '//' + window.location.host + '/sk/';//配置接口地址
  }
  // 開發(fā)測試環(huán)境
} else if (process.env.NODE_ENV == 'development') {
  axios.defaults.baseURL = '//test.gsapi.icontinua.cn/sk/';//配置接口地址
}

axios.defaults.withCredentials = true
//POST傳參序列化(添加請求攔截器)
axios.interceptors.request.use((config) => {
  if (config.method === 'post') {
    if (config.data && config.data.isForm) {
      config.data = qs.stringify(config.data);
      // config.headers['Content-type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
      config.headers['Content-type'] = 'application/json';
    } else if (config.data && config.data.isJson) {
      config.headers['Content-type'] = 'application/json';
    } else if (config.data && config.data.isPicture) {
      config.headers['Content-type'] = 'multipart/form-data';
    } else if (config.data) {
      config.data = qs.stringify(config.data);
      config.headers['Content-type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    }
  }
  return config;
}, (error) => {
  console.log('錯誤的傳參', error)
  return Promise.reject(error);
});
//返回狀態(tài)判斷(添加響應攔截器)
axios.interceptors.response.use((res) => {
  return res;
}, (error) => {
  console.log('網(wǎng)絡(luò)異常')
  return Promise.reject(error);
});

//返回一個Promise(發(fā)送post請求)
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        if (response) {
          resolve(response.data);
        }
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}

//返回一個Promise(發(fā)送get請求)
export function get(url, param) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: param
    })
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
      .catch((error) => {
        reject(error)
      })
  })
}
//返回一個Promise(發(fā)送put請求)
export function put(url, param) {
  return new Promise((resolve, reject) => {
    axios.put(url, param)
      .then(response => {
        // switch(response.data.code){
        //   case 401:
        // }
        resolve(response.data)
      }, err => {
        reject(err)
      })
      .catch((error) => {
        reject(error)
      })
  })
}

export default {
  post,
  get,
  put
}