vue App项目首页

本文转载自查看原文 2018-09-27 00:48 707

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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 vue2.0：（三）、项目开始，首页入门（main.js，App.vue,importfrom） vue2.0：项目开始，首页入门（main.js，App.vue,importfrom） vue2.0：项目开始-首页入门（main.js，App.vue,import...from） Vue项目启动后首页URL带的#该怎么去掉? 解决vue项目首页加载过慢的情况 Vue2.5开发去哪儿网App 首页开发 vue.js移动端app实战2：首页 vue项目打包之后首页白屏的问题前端Vue项目——首页/课程页面开发及Axios请求如何对vue项目进行优化，加快首页加载速度

vue App项目 首页

免责声明！

vue App项目首页