用axios渲染数据

---

要求:

图文如下：

一、根目录app

<template>
  <!-- 根目录 -->
  <div id="app">
    <!-- 路由出口 -->
    <router-view />
  
    <button @click="add">头部</button>
  </div>
</template>

<script>
export default {
   
  methods: {
   
    add() {
   
      // 点击回到顶部
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

二、main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import css from '@/css/index.js'
import dayjs from "dayjs"
Vue.prototype.dayjs = dayjs;//可以全局使用dayjs
import axios from 'axios'
Vue.prototype.$axios=axios
Vue.config.productionTip = false

new Vue({
   
  router,
  store,
  render: h => h(App)
}).$mount('#app')

安装axios：
	npm i axios
安装day.js:
	npm i dayjs
	

三.列表页

代码如下（示例）：

<!-- 列表页 -->
<template>
  <div class="home">
    <h1>AlloyTeam</h1>
    <p class="pp">腾讯全栈 ALLOYTEAM 团队 Blog</p>
    <ul>
      <li v-for="item of lists" :key="item.id">
        <!-- 跳转到详情页   用params传参数把借口里面的id传到详情页 -->
        <router-link :to="{ name: 'about', params: { itemId: item.id } }">
          <div>
            <div class="web">{
   {
    item.tags.toString() }}</div>
            <div class="timu">{
   {
    item.title }}</div>
            <div class&