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. Win7下设置一键关闭所有程序的功能
			
    (文章仅作个人整理和笔记) 在很多情况下,上班族发生这种情况的比较多吧,忙碌的一天下来,准备下班走人的时候,发现自己的电脑打开了好多程序,需要一个一个去关闭,那么有没有什么方法可以实现一键快速关闭所有 ...
    
			
    2. 
						
  2. HttpClient 之Fluent API 简单使用
			
    相比于HttpClient 之前的版本,HttpClient 4.2 提供了一组基于流接口(fluent interface)概念的更易使用的API,即Fluent API. 为了方便使用,Fluen ...
    
			
    3. 
						
  3. css 两边是线，中间文字的多种实现方法
			
    <div class="soild_text_one"> <fieldset> <legend>历史活动一</legend> < ...
    
			
    4. 
						
  4. 【记录】安装mysql Install/Remove of the Service Denied!错误的解决办法
			
    最近安装 Mysql 5.6版本,在安装的过程中出现Install/Remove of the Service Denied!错误!(本人Win10 系统) 出现此问题是由于当前用户权限不够,需要以管 ...
    
			
    5. 
						
  5. ubuntu 安装pip并修改为阿里云pip源
			
    0.sudo su1.安装pipapt-get install python-pip python-dev build-essentialpip install --upgrade pip pip i ...
    
			
    6. 
						
  6. sql 合并查询结果
			
    在使用js报表工具的时候,常常需要提供json数据进行显示, 在sql查询的时候就需要构造合适的查询结果出来; 就用到了合并两个没有关联关系的表数据, SELECT SUM(a1.amount) AS ...
    
			
    7. 
						
  7. asp.net core Mvc 增删改查
			
    1.创建项目 创建Data文件夹 创建实体类Students/cs public class Students { public Guid Id { get; set; } public string ...
    
			
    8. 
						
  8. Java实体与Json操作类
			
    import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.Jav ...
    
			
    9. 
						
  9. 思维——cf1178E
			
    一开始少看了条件:相邻两个字符不相等,字符集只有abc 那么我们取开头结尾各两个字符,一定有两个是相等的 #include<bits/stdc++.h> using namespace s ...
    
			
    10. 
						
  10. BZOJ 1927: [Sdoi2010]星际竞速(费用流）
			
    传送门 解题思路 仿照最小路径覆盖问题,用费用流解决此题.最小路径覆盖问题是拆点连边后用\(n-\)最大匹配,这里的话也是将每个点拆点,源点向入点连流量为\(1\),费用为\(0\)的边,向出点连流量 ...
    
			
    11.