搭建脚手架 配置反向代理 封装axios

npm install -g @vue/cli // mac本前边还是一样，要加sudo ： sudo npm install -g @vue/cli
vue create 项目名
defuault默认 Manually 自定义（vuex,sass,less,router…）
Babel Router Vuex CSS Linter（用着不舒服，可选可不选）
y history路由模式 n hash路由模式 (history模式还需要后台配合,地址栏无#)
Sass/Scss（node）或 Less
有选Linter（Standard）ESLint代码规范
save (保存就检查) commit(commit时检查)
files 选择第一个单独存放 第二个是放在package.json中
询问是否需要保存这些配置 y
保存配置的名字

另 需自己在项目根目录建vue.config.js

module.exports = {
  // 基本路径
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist',
  assetsDir: 'public',
  devServer: {
    open: true,
    https: false,
    host: 'localhost',
    port: 175,
    // 设置代理
    proxy: {
      // proxy all requests starting with /api to jsonplaceholder
      // http://yapi.demo.qunar.com/mock/19046/nav
      '/api': {
        target: 'http://127.0.0.1:175/', //代理接口
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' //代理的路径
        }
      }
    }
  },
}

封装axios
安装axios npm install --save axios
安装qs npm install --save qs

request.js

import axios from 'axios';


axios.defaults.timeout = 5000;
// axios.defaults.baseURL = '/api/xxx/';//服务器代理
// 响应前拦截
axios.interceptors.request.use(config => {
  //获取token
  // let token = token;
  // if (token) {
  //请求头Authorization携带token
  //     config.headers['Authorization'] =  token;
  // }

  return config;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});
// 响应后拦截
axios.interceptors.response.use(response => {
    // if (response.data.meta.msg == "没有权限") {
    //     alert('token已失效,如有需要请重新登陆！')
    //     router.replace({
    //         path: '/login',
    //     })
    //     cookies.remove("username");
    // }

    return response;
}, error => {
    // Do something with request error
    return Promise.reject(error);
});





// 定义对外Get、Post、File请求
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err.data)
    })
  });
}

/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

common.js 同layout.js 文件名随意

/**
 * 请求统一管理
 */
import { get, post } from './request';
import Qs from 'qs'
/* Common */

export default {
  tables: (params) => get('http://api', Qs.stringify(params))
  admin: (params) => get('/mock/admin.json', Qs.stringify(params))
} 

Index.js

import layout from './modules/layout'
import common from './modules/common'

const api = {
  layout,
  common
};

export default api;

main.js

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

使用 vuex

// import * as types from './mutation-types.js';
import layout from "@/api/modules/layout";
import { Message, Notification, Avatar } from 'element-ui'
export default {
  namespaced: true,
  state: {
    //个人信息
    userinfo: {},
 

  },
  actions: {
    async xadmin({ commit }, params) {
      const res = await layout.admin(params);
      if (res.meta.code == 200) {
        commit('xadmin', res);
      }
      if (res.meta.code != 200) {
        Notification.error({
          title: '错误',
          message: '接口请求错误',
          showClose: false
        });
        return;
      }
    },
  },
  mutations: {
    xadmin(state, params) {
      state.userinfo = params.userinfo
      state.menuData = params.menuData
    },
  },
};

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("layout");
export default {
  mounted() {
    this.xadmin();
  },
  methods: {
    ...mapActions(["xadmin"])
  }
};
</script>

组件

let params={}
this$api.layout.admin(params).then(res=>{})