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接收

01-26 14:46