1. 下载
npm i mint-ui -S
2. 引入
import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI)
3. mt-header的编写
注意:从官网直接复制的代码存在一个bug ,头部的左右两侧存在间隙
为解决这个问题 ,我们使用
<!DOCTYPE html> 去掉
fixed 就好了
4.使用轮播图的时候,注意将
5.在使用轮播图后 我们可以将 fixed 去掉了
6. axios 的使用
Vue.prototype.$axios = Axios; Axios.defaults.baseURL = 'https://www.sinya.online/api/';
请求数据:
created() { this.$axios.get('getlunbo') .then(res=>{ console.log(res); this.imgs=res.data.message; }) .catch(err=>console.log(err)); }
用 v-for 循环将图呈现出来
y<mt-swipe :auto="4000"> <mt-swipe-item v-for="(item,index) in imgs" :key="index"> <img :src="item.img" > </mt-swipe-item> </mt-swipe>