小案例：实现http://www.alloyteam.com/page/0/移动端效果，博客文章列表和文章详情页面

一：案例要求和数据：

(1)移动端适配
(2)列表跳详情
(3)回到顶部
(4)上下页
(5)时间格式
(6)解决接口跨域请求访问问题
(7)路由跳转无bug

接口路径均以 http://118.190.39.123:8877/ 为前缀
文章列表请求方法：get接口地址url：articles接收get参数：page：页数 （必填）limit：每页显示条数（必填）响应数据：{"total": 11,//文章总条数"current": 1,//当前页码"pages": 3,//总页码"results": [{"id": 0,//文章id"tags": [//文章标签"WEB开发"],"title": "2020・AlloyTeam 腾讯文档前端团队招聘・Web 工程师",//文章标题"author": "TAT.ALLOY",//作者"avatar": "",//头像"date": "2015-08-21T09:54:17+00:00",//日期"separator": "\\n\\t\\t\\t\\t 98,732  次浏览\\t\\t\\t",//浏览量"summary": "",//概述"content": " "//文章内容}]}文章详情
请求方法：post
接口地址url：articles/:id
接收post参数：id：文章id（必填）
响应数据：{"id": 0,//文章id"tags": [//文章标签"WEB开发"],"title": "2020・AlloyTeam 腾讯文档前端团队招聘・Web 工程师",//文章标题"author": "TAT.ALLOY",//作者"avatar": "",//头像"date": "2015-08-21T09:54:17+00:00",//日期"separator": "\\n\\t\\t\\t\\t 98,732  次浏览\\t\\t\\t",//浏览量"summary": "",//概述"content": " "//文章内容}

二：效果图展示：

三：开始写的思路

布局——数据——交互
第一：创建项目
第二：先把给的模板布局布好，一个要求一个要求实现
第三：配置移动端页面
第四：请求数据进行跨域
第五：拿到数据进行样式调整
第六：列表跳详情
第七：回到顶部
第八：调整上一页下一页
第九：时间格式
第十：处理bug和小细节

进行：

1.创建项目

在文件里标题栏cmd后在文件下vue create 项目名

2.创建完成之后 npm run serve看看效果
3.先创建一个文件名rem的文件下index.js写rem移动端布局，在main.js里面引入import '@/rem'

const WIDTH = 375//如果是尺寸的设计稿在这里修改
const setView = () => {//设置html标签的fontSizedocument.documentElement.style.fontSize = (100 * document.documentElement.clientWidth / WIDTH) + 'px'
}
window.onresize = setView
setView()

4.调整一下看看移动端是否配置成功
5.开始测接口和请求数据

//接口是 http://118.190.39.123:8877/ 产生跨域需要下载一个依赖`npm i axios`
//在vue.config.js里配置
module.exports = defineConfig({transpileDependencies: true,devServer:{proxy: {'/api': {target: " http://118.190.39.123:8877/ ",pathRewrite: {'^/api': "",}}}}
})

6.请求完数据要渲染数据，放在view文件下的home页面

<template><div class="home"><a href="one"></a><ul><li v-for="item in list" :key="item.id"><div class="ding"><!-- <img :src="item.avatar" alt=""> --><!-- {{item.avatar}} --><h1>AlloyTeam</h1><p>腾讯全端 AlloyTeam 团队 Blog</p></div><div><p>{{ item.author }}</p><p class="yi">{{ item.tags[0] }}</p><p class="er"><router-link :to="'/articles/' + item.id">{{ item.title }}</router-link></p></div><p>{{item.summary}}</p><div v-html="item.content" class="two"></div><p>{{ dayjs(item.date).format("YYYY-MM-DD") }}</p><button @click="zhi">置顶</button></li></ul><div class="footer"><button @click="top">上一页</button><button @click="bottom">下一页</button></div>
</template><script>
//跨域需要引用一下axios
import axios from "axios";
export default {name: "HomeView",data() {return {list: [],};},created() {axios.get('/api/articles?page=1&limit=1').then((res)=>{console.log(res)this.list=res.data.results})},methods: {},
};
</script>
<style lang="scss" scoped>
.home {width: 100%;ul {width: 100%;margin: 0 auto;li {.ding {display: flex;justify-content: space-between;}.two {blockquote {font-size: 0.1rem;}h3{border-bottom: 1px solid #ccc;}}}}a {color: black;text-decoration: none;}
}
</style>

7.数据已拿到也已渲染该列表跳详情啦，需要先拿到一个id值后用路由传参的方式传输该条数据，在详情的那条数据这样写

<p class="er"><router-link :to="'/articles/' + item.id">{{ item.title }}</router-link></p>

在router文件下的index.js修改路由配置

const routes = [{path: '/',name: 'home',component: HomeView},{path: '/articles/:id',name: 'articles',component: () => import( '../views/AboutView.vue')}
]

由此可见跳到了about页面在about页面配置详情页的内容

<template><div class="about"><!-- <img :src="item.avatar" alt=""> --><router-link to="/">首页</router-link><div v-html="list.content" class="first"></div><p>{{list.data}}</p><button @click="zhi">置顶</button></div>
</template>
<script>
import axios from 'axios';
export default {name: "AboutView",data(){return{list:{},num:1}},async mounted(){//先输出一下看id值是否传过来然后用async方法：console.log(this.$route.params.id)let res = await axios.post("/api/articles/" + this.$route.params.id);console.log(res);this.list = res.data;},methods:{zhi(){document.documentElement.scrollTop=0},}
};
</script>
<style lang="scss" scoped>.about{width: 100%;//height: 4rem;// background: purple;.first{h3{border-bottom: 1px solid #ccc;}}}
</style>

8.数据交互列表跳详情已成功，写写小效果置顶和时间格式
在home和about页面都有一个置顶的button按钮绑定点击事件后在methods写即可

methods:{zhi(){document.documentElement.scrollTop=0},}

时间格式的话下载一个插件npm install dayjs --save
在全局main.js引用一下import dayjs from "dayjs" Vue.prototype.dayjs = dayjs;后直接在组件内用即可
例：<p>{{ dayjs(item.date).format("YYYY-MM-DD") }}</p>
9.分页(上一页下一页)
主要是通过if判断来判断请求列表的页数来显示展示的内容

<div class="footer"><button @click="top">上一页</button><button @click="bottom">下一页</button>
</div><script>
//跨域需要引用一下axios
import axios from "axios";
export default {name: "HomeView",data() {return {list: [],num:1};},created() {axios.get('/api/articles?page=1&limit=1').then((res)=>{console.log(res)this.list=res.data.results})},methods: {top() {if (this.num > 1) {this.num = this.num - 1;axios.get("/api/articles/", {//params传递的参数是加密的哟params: {page: this.num,limit: 1,},}).then((res) => {console.log(res);this.list = res.data.results;});}else{this.num=3}console.log(112)},bottom() {if(this.num<3){this.num=this.num+1axios.get("/api/articles/", {params: {page: this.num,limit: 1,},}).then((res) => {console.log(res);this.list = res.data.results;});}else{this.num=1}},},
};
</script>

这段代码可以进行封装，简单的写

easy(){axios.get("/api/articles/", {params: {page: this.num,limit: 1,},}).then((res) => {console.log(res);this.list = res.data.results;});
}
//封完之后直接在用的地方调用即可

到这里这个小案例就已经结束了，如果还没学尽兴的话可以看看作者大大的其他博客