vue轮播组件及去掉路由#

最近公司要我去实现vue知识的系统讲解，总结一番，大致需要7节课，今天大致说一下我们使用vue需要学会的基本技能。vue是一个渐进性视图渲染框架，使用vue核心是数据出发，数据一般是我们前台从后台获取数据，对应显示到我们的页面上就可以。

使用vue基本工具必备，node, 翻墙的工具蓝灯（如果没有的同学可以找我，给你安装包），vue-cli，这是最基本的使用工具，如果您是后台开发人员，那么我推荐使用webstrom和vscode,他们都可以配置node，使用npm命令去启动，唯一不好的就是对于代码快速修改有点慢，如果电脑配置相当好可以使用；如果你的电脑比较卡顿，那么建议你使用sublime就可以了，通过安装插件就可以了。

下面进入我们的学习阶段，首先大致说一下vue的开发过程，也是大都数项目的使用惯例。写项目时，我们需要统一一下那些公用的方法，比如：请求错误页面，登录，注册，还有我们常用的弹窗页面，那些是我们私有的方法，那些需要定一些对象去使用。

我们一个系统设计的功能模块，从开发来说，常见的有轮播图，tab栏切换，搜索组件，地址，导航菜单（折叠导航菜单），footer(版权信息），还有友情链接，个人中心，头像修改，重置密码，登录（第三方登录），注册，列表页循环，分页功能，下拉刷新等

从上面的浅谈中，我们可以发现我们在项目中需要一个公共组件，header组件，footer组件，nav组件，swiper组件，tab组件，fail组件等其他组件，今天我们分享一下swiper组件封装到vue中去。

1.安装swiper，修改package.json中的，在这个对象中添加“swiper” : "^3.0.0" 注意这里是你想用的swiper插件版本号，可以去GitHub查看版本号，这个'^'是大于等于这个版本的意思。

2.如果你在webstorm中修改了配置文件，那么会告诉你更新npm install ,你更新就好了，如果失败了，那么建议你使用命令窗口去更新，使用cnpm install ，这个命令你可以清楚地看到自己的依赖包是多少个，好了会有对勾的绿色的。

3.在src 下新建一个文件夹common，用来存放我们的公共组件，header组件，footer组件也可以使用在这里，然后新建一个swiper.vue文件，文件名首字母大写，最好使用英文，如果使用webstorm我们可以在“setting”中新建一个vue类型的模板文件，这样自动生成好vue文件的模板，非常方便。

4.编写我们swiper的核心代码

<template>
  <div class="swiper-container" :id="swiperId">
    <div class="swiper-wrapper">
      <div  v-bind:key="index" v-for="(item,index) in swiperD" class="swiper-slide swiper-slide-next" @click="slideTo(item.url)">
        <img :src="item.imgHref" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'

export default {
  props: [ 'swiperId', 'swiperD' ],
  data () {
    return {

    }
  },
  mounted () {
    this.sw()
  },
  methods: {
    sw () {
      let that = this
      // eslint-disable-next-line
      let lunbo = new Swiper('#' + that.swiperId, {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        longSwiperRatios: 0.3,
        setWrapperSize: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        loop: true
      })
    },
    slideTo (url) {
      console.log(url, window)
      window.location.href = url
    }
  }
}
</script>

<style>
  @import url(./swiper.min.css);
  .swiper-container{
    padding-top:2.45rem;
    min-height:150px;
  }
  .swiper-slide{
    100%
  }
  .swiper-slide img{
    100%;
    display: block;
  }
</style>

注意这里的引入swiper.min.css需要引入，去掉这里的scoped，不然引用组件的使用样式不起效果

5.使用组件

导入组件

import Swipers from '../common/Swiper'

模板中引入

<Swipers swiperId="lunbo" :swiperD="swipers"></Swipers>
主要使用swiperId必须要传入， swiperD是我们的数据源。
6.篇后福利，去掉路由中的#
在router的index.js中使用

mode: 'history',
7.es语法中未使用的变量去掉语法检测：

// eslint-disable-next-line
8.GitHub链接地址：喜欢的记得star哈。
9.7天vue入门资料，不定期更新，喜欢的请加微信预定（xingguangbi,6块钱一份，需要的来）