使用axios发送ajax请求

1.安装

npm install axios

2.在Home.vue中引入

import axios from 'axios'

export default {

  name: 'Home',

  components: {

    HomeSwiper,

    HomeIcons,

    HomeRecommend,

    HomeWeekend

  },

  methods: {

    getHomeInfo () {

      axios.get('/api/index.json').then(this.getHomeInfoSucc)

    },

    getHomeInfoSucc (res) {

      console.log(res)

    }

  },

  mounted () {

    this.getHomeInfo()

  }

}

3.创建static文件夹，在里面放入要请求的index.json（只有static文件夹是对外暴露的，放别的地方无法访问）

访问网址：http://localhost:8080/static/mock/index.json

4.屏蔽模拟数据，不要上传到git，在.gitignore里添加

static/mock

5.打开config文件夹，修改index.js，对api路径做代理转发

module.export = {
  dev: {
    proxyTable: {
      'api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^api': '/static/mock'
        }
      }
    }
  }
}

6.父组件通过标签属性传值，子组件通过props接收