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>





　　





												


											
vue  App项目  首页的更多相关文章
	

    
								
  1. vue app项目 第一天  基本架构和路由配置
		
    一.前言 今天开始打算花6天时间 完成一个基于vue的买菜app 在这里记录一下项目的流程和第一次做这个项目遇到的坑 以及解决的办法 二.第一步 脚手架的安装 使用npm 安装好脚手架  安装脚手架教 ...
    
		
    2. 
						
  2. 关于个人开源项目(vue app)的一些总结
		
    关于个人开源项目(vue app)的一些总结 项目地址 https://github.com/BYChoo/record 项目简介 此项目名叫:Record.是以Vue全家桶(vue,vue-rout ...
    
		
    3. 
						
  3. 「Vue」vue cli3项目打包为APP方法及坑点
		
    1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...
    
		
    4. 
						
  4. vue.js项目安装
		
    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...
    
		
    5. 
						
  5. Vue开源项目汇总(史上最全)(转)
		
    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
    
		
    6. 
						
  6. day 82 Vue学习二之vue结合项目简单使用、this指向问题
		
    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六  ...
    
		
    7. 
						
  7. vue ssr 项目改造经历
		
    vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也 ...
    
		
    8. 
						
  8. 从无到有构建vue实战项目（二）
		
    二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...
    
		
    9. 
						
  9. 新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚
		
    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. apache的commons-fileupload中FileItem类和ServletFileUpload
			
    FileItem类的常用方法      1.boolean  isFormField().isFormField方法用来判断FileItem对象里面封装的数据是一个普通文本表单字段,还是一个文件表单字 ...
    
			
    2. 
						
  2. 2019-9-2-win10-uwp-Markdown
			
    title author date CreateTime categories win10 uwp Markdown lindexi 2019-09-02 12:57:38 +0800 2018-2- ...
    
			
    3. 
						
  3. Ansible  和  Playbook 暂存
			
    Ansible  和  Playbook 暂存 , 也是一个批量管理工具 自动化的批量管理工具 主机清单  HOST Inventory 模块插件  Playbooks 查看ansible的目录结构  ...
    
			
    4. 
						
  4. TCP  三次握手和四次挥手中的ACK 为什么总是SYN + 1 或者 FIN +1 而不是+ 其他数值？
			
    TCP 三次握手的时候 1.客户端 向服务端发起连接请求,这个时候客户端将发送一个SYN分节(假设其值为J),它告诉服务端我发送数据的初始序列号将是J. 2.服务端收到这个请求后,必须确认(ACK)  ...
    
			
    5. 
						
  5. Makefile中的$(addprefix)，添加前缀，指定目标生成目录
			
    先给大家看段Makefile的代码吧: INCLUDE_DIR=usr/java/jdk1..0_25/include \ usr/java/jdk1..0_25/include/linux INCL ...
    
			
    6. 
						
  6. Eclipse如何设置jsp文件默认UTF-8格式编码
			
    我使用的是Eclipse Jee Neon, Window->Preferences 具体设置如图所示: 
    
			
    7. 
						
  7. Dart编程实例 - Dynamic 关键字
			
    Dart编程实例 - Dynamic 关键字 void main() { dynamic x = "tom"; print(x); } 本文转自:http://codingdict ...
    
			
    8. 
						
  8. (转载)js引擎的执行过程（二）
			
    概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...
    
			
    9. 
						
  9. XSS的原理分析与解剖（第二篇）
			
    0×01 前言: 上节(http://www.freebuf.com/articles/web/40520.html)已经说明了xss的原理及不同环境的构造方法.本期来说说XSS的分类及挖掘方法. 当 ...
    
			
    10. 
						
  10. thinkphp  表单令牌
			
    表单令牌 ThinkPHP支持表单令牌验证功能,可以有效防止表单的重复提交等安全防护.要启用表单令牌功能,需要配置行为绑定, 在应用或者模块的配置目录下面的行为定义文件tags.php中 就是在你的  ...
    
			
    11.