Ant Design Vue Api List 基础训练

核心代码1:

<template>
<a-list item-layout="horizontal" :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta
          :description=(item.ContentName)
        >
          <template #title :style="{textAlign: 'left'}">
            <a href="https://www.antdv.com/">{{ item.PlayerName }}</a>
          </template>
          <template #avatar>
            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>
<script>
import { onMounted,ref,defineComponent} from 'vue';
import axios from "axios";
export default defineComponent({   
  setup(){    
    const data = ref([]);
    const getData=function(){
        axios.get("/yyyyy/78")
        .then(response=>{
          if(response.status==200){
            // console.log(response.data)
            data.value=response.data;
          }
        })
        .catch(error=>console.log(error));      
      };
    onMounted(()=>{
        getData();
    });    
    return{
        data
    };
  }  
})
</script>
<style>
.ant-list-item-meta-title,.ant-list-item-meta-description{
  text-align: left;
}
</style>

vue.config.js 基础设置:

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.xxxx.net:9999',
                changeOrigin: true
            }
        }
    }
}