vue App项目 首页

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  ，头部的左右两侧存在间隙

为解决这个问题 ，我们使用
fixed 就好了







4.使用轮播图的时候，注意将<!DOCTYPE html> 去掉
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>





　　











            

            
posted @ 
2018-09-27 00:48 
1点 
阅读(1160) 
评论(1) 
编辑 
收藏 
举报