vue + axios + element-ui项目搭建

安装node.js

npm install -g vue-cli
vue init webpack vue-graduation

导入element-ui

npm i element-ui -s

修改webpack.base.config.js

 {
        test: /\.(woff2?|eot|woff|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }

修改main.js

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

ojbk
之前因为没有修改webpack配置文件,扫描不到element-ui 鼓捣了半天\

引入axios

npm install axios --save

配置axios

import axios from 'axios'


// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 塞header
    // 判断是否存在token，如果存在的话，则每个http header都加上token
    config.headers['token'] = window.sessionStorage.getItem("token");
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器  
axios.interceptors.response.use(function(response){  
  // 扒皮 扒掉状态码
  response = response.data
  if(response.code == 0){
    response = response.content
    return response;
  }else if(response.code == 10001 || response.code == 10002) {
    // 如果没有登陆 呼出登陆窗口
    //没有token或token失效，更新用户信息
    window.sessionStorage.setItem("token","")
    // 设置VUEX中登陆状态 呼出登陆窗口
 
    Promise.reject(response)
    response = response.content
    return response;
  } else  {
    // 如果没有登陆 呼出登陆窗口
    // 设置VUEX中登陆状态 呼出登陆窗口

    Promise.reject(response)
  }
}),function(error){
  error
}  

// 跨域
axios.defaults.withCredentials = true
//设置不同环境的baseUrl
axios.defaults.baseURL = "http://localhost:7000/"

export default axios;

main.js

import axios from './api'
Vue.prototype.$axios = axios;