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. JAVA求解质因数
			
    /** * 求质因数 * @param n * @return */ public static List<Integer> generatePrimeFactors(int n){ Li ...
    
			
    2. 
						
  2. asp.net Mvc 增删改查
			
    1.创建项目 已经创建好项目了 2.创建数据库 使用这个数据库或者自己创建一个数据库,一个表就好,简单 USE [LearnAdminlte] GO /****** Object: Table [db ...
    
			
    3. 
						
  3. spring boot 四大组件之Actuator
			
    执行器(Actuator)的定义 执行器是一个制造业术语,指的是用于移动或控制东西的一个机械装置,一个很小的改变就能让执行器产生大量的运动.An actuator is a manufacturing ...
    
			
    4. 
						
  4. php上传文件（简易版）
			
    1.前台form表单处添加 enctype="multipart/form-data" 2. //上传文件保存到目录 header("content-type:text/ ...
    
			
    5. 
						
  5. 泛型（Java 5 开始）
			
    前言 Java 5 开始之前,从集合读取的数据都必须进行类型转换,如果插入错误的数据就会报错. 有了泛型,编译器会自动为你的插入进行转换,并在插入时告知是否插入了类型错误的对象. 将类型由原来的具体的 ...
    
			
    6. 
						
  6. Unity NGUI插件
			
    前言:关于Unity中关于UI的插件,我们最开始学的是UGUI,是Unity自带的UI系统,而在Unity版本还没更新出UGUI之前,除了NGUI没有一个更好些的插件,所以人们不得不去选择NGUI去制 ...
    
			
    7. 
						
  7. ruby中数组认识
			
    a = 1...5这样赋值,a不是数组类型,1...5操作是一种枚举类型. a = ["1","2","3","4"], ...
    
			
    8. 
						
  8. qt中使用sqlite存储数据
			
    一.sqilte的安装 在Windows上安装SQLite: 请访问 SQLite 下载页面,从 Windows 区下载预编译的二进制文件. 您需要下载 sqlite-tools-win32-*.zi ...
    
			
    9. 
						
  9. MFC弹出选择文件和选择文件夹代码
			
    选择文件夹 TCHAR szSelectedDir[]; BROWSEINFO bi; ITEMIDLIST *il; bi.hwndOwner = m_hWnd; bi.pidlRoot = NUL ...
    
			
    10. 
						
  10. chromedriver安装（谷歌浏览器驱动安装）
			
    如果程序执行错误,浏览器没有打开,那么应该是没有装 Chrome 浏览器或者 Chrome 驱动没有配置在环境变量里.下载驱动,然后将驱动文件路径配置在环境变量即可. chromedriver下载地址 ...
    
			
    11.