vue4.2初始化项目

• vue/cli新建项目
• 安装vue-cli-plugin-element插件，并配置按需导入
• 安装axios依赖并在main.js中导入

1，创建vue.config.js在项目根目录下

module.exports = {
  devServer: {
    port: 8000,
    open: true,
    proxy: {
      '/php': {
        target: 'http://localhost:9909/php/interface/',
        changeOrigin: true,
        pathRewrite: {
          '^/php': ''
        }
      },
      '/elem': {
        target: 'https://elm.cangdu.org',
        changeOrigin: true,
        pathRewrite: {
          '^/elem': ''
        }
      },
      '/douban': {
        target: 'https://douban.uieee.com/v2',
        changeOrigin: true,
        pathRewrite: {
          '^/douban': ''
        }
      }
    }

  }
}

2,创建request.js在src目录下，配置请求信息

import axios from 'axios'
import qs from 'qs'
import { Indicator } from 'mint-ui'

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  Indicator.open({
    text: 'Loading...',
    spinnerType: 'fading-circle'
  });
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  Indicator.close();
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

const axiosGet = (url,params) =>{
  return new Promise(function(resolve,reject){
    // params = qs.stringify(params)
    //有些接口不需要转字符串 如果要转 ，那在传参数的时候只能使用？start=0&&count=7的方法
    axios.get(url,{params:params})
      .then((res)=>{
        resolve(res.data)
      })
      .catch((error)=>{
        reject(error)
      })
  })
}

const axiosPost = (url,params) =>{
  return new Promise(function(resolve,reject){
    // params = qs.stringify(params)
    axios.post(url,{params:params})
      .then((res)=>{
        resolve(res.data)
      })
      .catch((error)=>{
        reject(error)
      })
  })
}
export default {
  get: axiosGet,
  post: axiosPost
}

3,在main.js中导入request.js全局使用

// 配置axios的第三种封装方式
import axios from './api/request'
Vue.prototype.$http = axios

4,在单文件中使用

 methods: {
    async getDetailData() {
      this.detailId = this.$route.params.id;
      const res = await this.$http.get(
        "/douban/movie/subject/" + this.detailId
      );
      this.txtData = res.popular_reviews;
      console.log(res);
      this.MovieDetail = res;
      res.images.small = "https://images.weserv.nl/?url=" + res.images.small;
      this.detailImg = res.images.small;
    }
  }