---

要求:

图文如下：

一、根目录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="jianjie">{{ item.author }}</div>
            <div class="date">
              <!-- 时间模板（需要引入） -->
              <span>{{ dayjs(item.date).format("YYYY-MM-DD HH:mm:ss") }}</span
              ><span>/</span>
              <!-- 用正则来提取纯数字 -->
              <span>{{ item.separator.match(/\d+/g).toString() }}次浏览</span>
            </div>
            <!-- 渲染借口文本祛除标签提取纯文本 -->
            <div v-html="item.summary" class="cont"></div>
          </div>
        </router-link>
      </li>
    </ul>
    <!-- 分页 -->
    <router-link to="homes"><button>下一页</button></router-link>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  data() {
    return {
      // 存储
      lists: [],
    };
  },
  // 打开页面展示
  created() {
    //默认用get方式获取
    this.$axios({
      // ` 模板字符串里面放变量
      url: `/api/articles?page=${1}&limit=${"5"}}`,
    }).then((res) => {
      // 把借口里面的值存储到你新建的lists里面
      this.lists = res.data.results;
      console.log(this.lists);
    });
  },
};
</script>

四.详情页

代码如下（示例）：

<template>
  <!-- 详情页 -->
  <div class="about">
    <div v-html="this.list.title"></div>
    <div v-html="this.list.author"></div>
    <div v-html="this.list.summary"></div>
    <div v-html="this.list.content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存数据
      list: [],
    };
  },
  // 打开页面就好显示
  created() {
    this.$axios
      // 用post 接收列表页的参数 获取到你点那个列表的id值
      .post(`/api/articles/${this.$route.params.itemId}`)
      .then((data) => {
        this.list = data.data;
        console.log(this.list);
      });
  },
};
</script>

该处使用的url网络请求的数据。

---

五.分页

代码如下（示例）：

<template>
  <div class="home">
    <h1>zi</h1>
    <p class="pp">腾讯全栈 ALLOYTEAM 团队 Blog</p>
    <ul>
      <li v-for="item of lis" :key="item.id">
        <router-link to="about">
          <div>
            <div class="web">{{ item.tags.toString() }}</div>
            <div class="timu">{{ item.title }}</div>
            <div class="jianjie">{{ item.author }}</div>
            <div class="date">
              <span v-html="item.date"></span><span>/</span
              ><span v-html="item.separator"></span>
            </div>
            <div v-html="item.summary" class="cont"></div>
          </div>
        </router-link>
      </li>
    </ul>
    <!-- 回到主页面 -->
    <router-link :to="{ name: 'home' }"><button>上一页</button></router-link>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  data() {
    return {
      lis: [],
    };
  },
  created() {
    this.$axios({
      url: `/api/articles?page=${2}&limit=${"5"}}`,
    }).then((res) => {
      this.lis = res.data.results;
      console.log(this.lis);
    });
  },
};
</script>

六.路由配置

代码如下（示例）：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/homes',
    name: 'homes',
    component: ()=> import ("@/views/Home.vue")
  },
  {
    path: '/about/:itemId',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

注意

package.json里面要有这些：

{
  "name": "my-app01",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.1.2",
    "core-js": "^3.8.3",
    "dayjs": "^1.11.5",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

总结

css样式按照自己的要求写就好。需要用接口的话 先测试接口 再解决跨域问题 再检查自己是否安装、引用axios 正常获取数据 然后console.log(打印获取到的数据 【主要是检查是否能获取到数据】) 最后使用就行