1.下载安装
执行下载命令：npm i axios -S / npm install axios --save-dev
查看是否安装成功：
package.json里
main.js里引入
index.vue页面data外面接接口
mounted:function(){
this.axios.get("http://news-at.zhihu.com/api/4/news/latest").then(res=>{
this.conList=res.data.stories;
this.swiperList=res.data.top_stories;
});
this.axios.get("http://news-at.zhihu.com/api/4/news/before/20131119").then(res=>{
this.histroy=res.data.stories;
});
}
2.如果需要解决跨域问题
执行安装命令：
npm i vue-axios -S
查看是否安装成功：
package.json里
main.js里引入
新建目录：vue.config.js
vue.config.js里写
module.exports={
devServer:{
proxy:{
'/api':{
target:'http://news-at.zhihu.com/api/4/', //接口链接相同的前半部分
ws:true,
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
}
}
index.vue页面里：
3.vant组件库
Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率，
Vant 旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
一.vant下载命令：
npm i vant -S
查看是否安装成功：
package.json里：
二.vant可用于轮播图特效和下拉刷新数据
main.js里引入
import Vant from 'vant'
import { Button } from 'vant';
import 'vant/lib/index.css';
//Vue.prototype.$axios=axios
Vue.use(Vant)
Vue.use(Button);
index.vue里写
Van-pull-refresh的结束标签放在整个页面的最大盒子结束标签的上一行
下拉刷新：
return里写：
// 刷新
count: 0,
isLoading: false,
Data()外面写：
methods: {
//刷新
onRefresh() {
setTimeout(() => {
this.isLoading = false;
}, 1000);
}
},
4.轮播图方法二：https://www.wandouip.com/t5i221721/
5.问候语：
<span v-if="grt=(ho<9?'早上好':
ho<12?'上午好':
ho<15?'中午好':
ho<19?'下午好':
'晚上好'
)">{{grt}}</span>
return里写：
return{
//问候语
grt:"hello",
ho:new Date().getHours(),
}
6.获取日期（月和日）：
<div class="div_left">
<p class="number">{{time | nowDay}}</p>
<p>{{time | nowMonth}}</p>
</div>
return里写：
return{
//时间
time:Date.parse(new Date()),
}
data外面写：
//时间
filters:{
nowDay: function (value) {
let date = new Date(value);
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return d
},
nowMonth: function (value){
let date = new Date(value);
let MM = date.getMonth()+1;
MM = MM < 10 ? (MM) : MM;
return MM+'月'
}
}