最近公司要我去实现vue知识的系统讲解，总结一番，大致需要7节课，今天大致说一下我们使用vue需要学会的基本技能。vue是一个渐进性视图渲染框架，使用vue核心是数据出发，数据一般是我们前台从后台获取数据，对应显示到我们的页面上就可以。
使用vue基本工具必备，node, FQ的工具蓝灯（如果没有的同学可以找我，给你安装包），vue-cli，这是最基本的使用工具，如果您是后台开发人员，那么我推荐使用webstrom和vscode,他们都可以配置node，使用npm命令去启动，唯一不好的就是对于代码快速修改有点慢，如果电脑配置相当好可以使用；如果你的电脑比较卡顿，那么建议你使用sublime就可以了，通过安装插件就可以了。
下面进入我们的学习阶段，首先大致说一下vue的开发过程，也是大都数项目的使用惯例。写项目时，我们需要统一一下那些公用的方法，比如：请求错误页面，登录，注册，还有我们常用的弹窗页面，那些是我们私有的方法，那些需要定一些对象去使用。
我们一个系统设计的功能模块，从开发来说，常见的有轮播图，tab栏切换，搜索组件，地址，导航菜单（折叠导航菜单），footer(版权信息），还有友情链接，个人中心，头像修改，重置密码，登录（第三方登录），注册，列表页循环，分页功能，下拉刷新等
从上面的浅谈中，我们可以发现我们在项目中需要一个公共组件，header组件，footer组件，nav组件，swiper组件，tab组件，fail组件等其他组件，今天我们分享一下swiper组件封装到vue中去。
1.安装swiper，修改package.json中的
2.如果你在webstorm中修改了配置文件，那么会告诉你更新npm install ,你更新就好了，如果失败了，那么建议你使用命令窗口去更新，使用cnpm install ，这个命令你可以清楚地看到自己的依赖包是多少个，好了会有对勾的绿色的。
3.在src 下新建一个文件夹common，用来存放我们的公共组件，header组件，footer组件也可以使用在这里，然后新建一个swiper.vue文件，文件名首字母大写，***使用英文，如果使用webstorm我们可以在“setting”中新建一个vue类型的模板文件，这样自动生成好vue文件的模板，非常方便。
4.编写我们swiper的核心代码
1 <template> 2 <div :id="swiperId"> 3 <div> 4 <div v-bind:key="index" v-for="(item,index) in swiperD" @click="slideTo(item.url)"> 5 <img :src="item.imgHref" /> 6 </div> 7 </div> 8 <div></div> 9 </div> 10 </template> 11 12 <script> 13 import Swiper from 'swiper' 14 15 export default { 16 props: [ 'swiperId', 'swiperD' ], 17 data () { 18 return { 19 20 } 21 }, 22 mounted () { 23 this.sw() 24 }, 25 methods: { 26 sw () { 27 let that = this 28 // eslint-disable-next-line 29 let lunbo = new Swiper('#' + that.swiperId, { 30 pagination: '.swiper-pagination', 31 paginationClickable: true, 32 longSwiperRatios: 0.3, 33 setWrapperSize: true, 34 autoplay: 3000, 35 autoplayDisableOnInteraction: false, 36 loop: true 37 }) 38 }, 39 slideTo (url) { 40 console.log(url, window) 41 window.location.href = url 42 } 43 } 44 } 45 </script> 46 47 <style> 48 @import url(./swiper.min.css); 49 .swiper-container{ 50 padding-top:2.45rem; 51 min-height:150px; 52 } 53 .swiper-slide{ 54 width:100% 55 } 56 .swiper-slide img{ 57 width:100%; 58 display: block; 59 } 60 </style>