vue-cli项目中使用axios/vant

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+'月'
}
}

• 点赞
• 收藏
• 分享
• 文章举报