（五）快速上手VUE api接口实现示例

概述

使用到的代码文件

1、main.js：安装插件

import Axios from 'axios';

Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';

2、配置api地址通用域名前缀

        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: "https://api.coindesk.com/v1",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },

3、写个getData函数：获取数据并赋值

  methods: {
    getData(){
      this.$axios.get("/bpi/currentprice.json")
      .then((response)=>{
        this.time = response.data.chartName
      })
      .catch((error)=>{
        console.log(error)
      })
    }
  },

4、mounted生命周期钩getData()

  mounted(){ /*生命周期函数*/
    this.getData();
  }

常见问题：axios在build时候失效？

解决方法：用全局变量补全api地址。