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{
     width:100%
   }
   .swiper-slide img{
     width: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块钱一份，需要的来）