最近公司要我去实现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中的
，在这个对象中添加“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的核心代码
我要评论 1 <template>
2 <div class="swiper-container" :id="swiperId">
3 <div class="swiper-wrapper">
4 <div v-bind:key="index" v-for="(item,index) in swiperD" class="swiper-slide swiper-slide-next" @click="slideTo(item.url)">
5 <img :src="item.imgHref" />
6 </div>
7 </div>
8 <div class="swiper-pagination"></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>
注意这里的引入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块钱一份，需要的来）
如对本文有疑问， 点击进行留言回复！！
网友评论