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. 关于个人开源项目(vue app)的一些总结

    关于个人开源项目(vue app)的一些总结 项目地址 https://github.com/BYChoo/record 项目简介 此项目名叫:Record.是以Vue全家桶(vue,vue-rout ...

  3. 「Vue」vue cli3项目打包为APP方法及坑点

    1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...

  4. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  5. Vue开源项目汇总(史上最全)(转)

    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  6. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  7. vue ssr 项目改造经历

    vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也 ...

  8. 从无到有构建vue实战项目(二)

    二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...

  9. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

随机推荐

  1. python--知识小结和集合

    知识小结 一. = 表示赋值 ==表示比较值的大小 is 比较内存地址 二. 数字小数据池:在-5~256之内,id在电脑里是一样的 字符串id一样要求: ①:不能有特殊字符 ②:s(一个单字符)*2 ...

  2. android meta_data配置数据

  3. C stdarg.h

    参考:https://www.cnblogs.com/bettercoder/p/3488299.html    博主:运动和行动 va_start宏,获取可变参数列表的第一个参数的地址(list是类 ...

  4. Ansible批量自动化管理工具(二)

    Ansible批量自动化管理工具(二) 链接:https://pan.baidu.com/s/1A3Iq3gGkGS27L_Gt37_I0g 提取码:ncy2 复制这段内容后打开百度网盘手机App,操 ...

  5. 界面设计微信小程序

    上一个周期将微信小程序的程序编完了,虽然还有很多需要修改的地方,大体已经完成.剩下的边角料以后再弄 这个周期来学习一下微信小程序的设计....好吧. 首先还是需要看一下微信的设计指南的.地址 http ...

  6. PHP-最长有效括号

    给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()"输出: 2解释: 最长有效括号子串为 "()" ...

  7. mysql的数据导出方法

    mysql的数据导出几种方法   从网上找到一些问题是关于如何从MySQL中导出数据,以便用在本地或其它的数据库系统之上:以及 将现有数据导入MySQL数据库中. 数据导出 数据导出主要有以下几种方法 ...

  8. leetcood学习笔记-13

    错误记录 class Solution: def romanToInt(self, s: str) -> int: d = {'I':1,'V':5,'X':10,'L':50,'C':100, ...

  9. 阿里云HBase全新发布X-Pack NoSQL数据库再上新台阶

    一.八年双十一,造就国内最大最专业HBase技术团队 阿里巴巴集团早在2010开始研究并把HBase投入生产环境使用,从最初的淘宝历史交易记录,到蚂蚁安全风控数据存储.持续8年的投入,历经8年双十一锻 ...

  10. QT之QCustomPlot(一)

    QDetectPlot::QDetectPlot(QWidget *parent) : QCustomPlot(parent) { QVector<), y(); // initialize w ...