购物车渲染

//  创建路由

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book'
})

export default instance




//   创建获取数据方法

import request from '../utils/request'

export const getData = () => {
  return request({
    method: 'get',
    url: 'api/books'
  })
}

<template>
  <div>
      <div v-for="(item,index) in list" :key="index">
         <img :src="item.img" >
         <div>书名:{{item.name}}</div>
         <div>价格:{{item.price}}</div>
      </div>
  </div>
</template>

<script>
import { getData } from './api/data'
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getList()
  },

  methods: {
    async getList () {
      const { data } = await getData({})
      this.list = data.data
    }
  }
}
</script>

<style>
 img {
    width: 200px;
  }
</style>