提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue App项目 首页

VueApp项目 首页
2023-09-11 14:22:19 时间

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>





　　






 
                

                                
                

                
            

        

        

        

            

                
相关文章