一.开始一个项目
按照开发文档安装npm node
安装webpack包
初始化项目
安装包依赖
创建好项目目录
还要安装一下插件，fastclick babel-polyfill等等
二.此项目我采用sass
安装 sass loader
修改基本路径，
一级路由
二级路由
路由的懒加载（只有用到这一页的时候才加载）
注意各种层级关系，为了避免混乱维护，放在了变量文件中统一修改
三、关于导航部分的开发
首先创建一个基础的组件，即在任何的项目中都可以用的navbar，这个组件是经过观察着几张页面的相似性二制作的，这些页面大致都是左中右的布局
在基础组件navbar中提供插槽，让header容器直接使用，当然不要忘了组件的引入配置
采用左中右的flex布局，但是会发现一些小的bug：
如果最右边的小图标的左边没有东西了他会靠左放置，解决：寻找左边是否有东西，其中有一个有就用static，若都没有用position：abslute就能保证正常显示了
接下来就是传入类似于其他页面的h1标题了，让他左右都有一定相同的距离，就能保证水平居中，但是也会发现一些bug：
即使给h1中设置了超出内容省略号，也得不到想要的效果，解决办法：将h1标签中嵌入span，使span中的内容可省略，显示省略号
像传入title的值为jqjqjq这种下边很长，左右会超出的内容时候，会被自动截掉，解决办法：对于上下被截掉，可以给span设置line-height1.5 对于左右被截掉可使text的width为100%，但是此时文字不再居中，那么我们就在title中加上text-align：center
好的行为习惯：再向基础组件传入数据时，对传入的内容进行校验（类型，默认值等）
四、关于幻灯片swiper的开发（本地数据）
首先选用vue的一个插件 cnpm install --save vue-awesome-swiper安装并将文件引入（在网上查找相应的用法）
首先是对基础组件base/swiper/index.vue的开发，按照开发文旦进行参数的选择，并用props来接收参数，接受完参数还要用data（）{return}变成自己的才可以利用
至于为什么在swiper中加slot插槽，是因为可能在使用幻灯片时候里面不一定是死的，有的有可能是文字和图片，所以直接在我们需要的slider.vue文件中直接使用插槽即可，值得注意的点是：
1,我们使用的分页器插槽是插件中自带的
2，对于分页器传参和其他不同，采用el
在对网页组件pages/home/slider.vue进行开发（注意引入swiper的css文件，不然会没有效果），依旧在data(){return}中来定义自己的参数，因为这些都是可配置的参数，我们单独提取出一个文件，便于管理，注意的点
本地图片的引入必须用require，还有就是:src ， :href的动态属性，必须加：
当页面的布局不能顺自己的心意的时候，记得去网页中查找html的嵌套结构在慢慢修改（耐心）
五、关于幻灯片图片的获取以及错误处理
首先，采用类似于ajax的插件 cnpm install --save axios进行安装配置
在src/api/home.js中封装一个方法，将这个方法暴露给主页获取图片数据，获取数据axios.get('http://www.imooc.com/api/home/slider'）相当于一个promise对象，我们用then来进行回调操作，一般在写程序的时候可以console下先看看打印出来的是什么内容，然后在具体获取什么样的数据，不管是上文，还是下文提到的各种组件，注意都要引入才能使用
我们自己写一个方法放在created中并且执行这个方法，一般会在created中获取数据，将这个方法写在methods中，而created只是调用这个方法，获取到数据后将这个值赋给sliders
接下来看似弄好了，但是存在小bug：获取到服务器的数据后，幻灯片没有办法无缝滚动了，存在这个现象的原因是我们还没有从服务器上获取到数据便利用了me-slider这个组件，导致里面的各种控制算法混乱，所以我们用一个v-if判断来处理，使图片都获取到了，在用这个组件
说完了正确的获取，我们该讨论一下如果发生了获取错误该怎么办
例如获取超时，code不为0，对方服务器有问题等等我们手动抛出一个错误，并且捕获他，并且处理他
一般我们利用服务器获取数据的时候，无论是ajax还是jsonp我们一般都会设置一个timeout，一旦数据获取过长时间，你一直等着，岂不是智障了！
最后好的开发习惯将这些可配置修改的项，例如超时TIMEOUT，成功码SUCC_CODE都放在一个统一的js文件中api/config.js
六、当幻灯片没有加载出来时，显示加载组件（为了看到此效果这里我们手动的设置了定时器，一秒钟之后返回图片数据）
首先还是不能忘记，导入注册引用
通过给组件传参来控制他的图片是否显示，这里我们提供了一个插槽，如果我们不用这个插槽，就默认显示自己的loading图片，同时传text来修改显示什么文字，本项目默认的是‘加载中...’
在一个灵活性就是，这个加载的图片和文字是竖着排还是并排放，我们选择了给他传一个inline参数，这里要注意动态class的创建，到了书写样式的部分了，这里采用了css3的一个选择器 ~ 来控制当分别为横竖时的样式
开发中遇到的小问题，组件name：‘MeLoading’第二个字母要大写才能用<me-loading>引用成功
七、右侧滚动条的开发
依旧用swiper插件，引入注册使用
思想是，先加一个swiper-swiper-slide是一个可以垂直滚动的容器，然后在加入.swiper-scrollbar为这个容器加上一个显示的滚动条
注意在设置参数的时候，一页中可以显示几张图片slidesPerView是必须要设置的，如果不设置就没有办法向下滚动
以上都设置完我们发现滚动条仍然不能滚动，这里就出现bug了，经过我们观察页面发现
滚动条的swiper-container的高度为内容的总高度，如果你容器的高度为内容的总高度，又怎么可以滚动的，只有当容器的高度小于内容高度时才可以滚动，所以我们要设置一下容器swiper-container的高度为撑开外边的父容器，但是随之而来的问题又来了，由于子元素swiper-slide继承了swiper-container便也变成了一样的高度，所以这时候我们需要将swiper-slide的高度设置为auto
现在一个完美的导航条就诞生了！
八、图片面板的开发
首先我们将它在home中做一个nav的组件，就不将他作为基础组件了，因为别的项目中也用不到
其次就是巧妙灵活的运用flex布局了
对于这些图片和下面的text信息，我们将这些参数放在配置文件config中，以便图片的增加删除和修改
我们之所以不放在data（）{}中是因为data中存放的是会动态变化的数据，而我们这里的数据只进行一次渲染，不会再改变了所以放在created（）中即可
九、热卖推荐h3标题
学到一种新的css3布局方式，采用伪类 :befor :after ------- xx ------- 这种布局方式
十、热卖商品信息的获取（一定要仔细看这部分的代码）
我们获取数据的接口一看就是jsonp，所以我们利用github上的vue npm install --save jsonp
接下来我们查看jsonp文档，发现穿的参数是url，但是这个url是带着参数形式的，还有他本身的参数，回调函数，这里的回调函数我们相拥ES6的箭头函数，所以我们对jsonp进行一层封装，将其封装在一个函数中，而这个函数接受的参数是不带参数的url，参数以及配置参数，这个函数封装后实际返回的是一个Promise对象，这里注意Promise的用法
接下来我们在api/home.js中获取一下数据，首先在文件中引入自己封装好的jsonp，通过函数完成获取
created(){
this.getRecommend();
},
methods:{
getRecommend(){
if(this.curPage > this.totalPage){
return;
//如果没有可获取的页数了，就直接返回不获取了
}
return getHomeRecommend(this.totalPage).then( data => {
//如果在home.js中有错误，catch后返回的undefined而后便的then接受这个参数，所以在此我们需要判断一下是否接受到了data图片数据
if(data){
console.log(data);
this.curPage++;
this.totalPage = data.totalPage;
//这里是一个值得注意的点，为什么用concat() concat()链接两个或多个数组,如果不用这种方法的话每次都是获取20个新的图片，不能接上之前的图片
this.recommends = this.recommends.concat(data.itemList);
console.log(this.recommends);
}
})
}
一开始我们就让总页数为1，因为一开始我们并不知道总共有多少页，所以在获取一次数据之后将总页数的常量进行修改，还有一个注意点就是那个concat()的运用了，好好的理解一下
然后就是loading的导入，还是想获取幻灯片数据那样，用v-if，v-else进行判断如果还未获取到数据，显示loading插件，如果获取到了展示图片，图片展示我们依旧用flex布局
还有一个css的小技巧，就是关于让图片不管长宽比是多大，都以正方形显示width:100%; padding-top: 100%;
十一、更新右侧的滚动条
经过上一步，获取到了所有的图片数据并且进行渲染，我们发现右侧的导航条下拉不了了出现这个问题的愿意还是和之前的一样，我们在还未一步获取到数据的时候便引用了右侧的滚动条，导致数据都渲染之后右侧的导航条得不到更新，所以接下来我们来解决这个问题：
首先在recommend.vue中获取到了所有的数据之后我们向父组件中传递一个信号，并且把获取到的数据给他this.$emit('loaded',this.recommends); 然后我们在父组件中来接受这个数据@loaded="getRecommends" 接收到这个数据之后
我们将这个数据传递给<me-scroll>组件，然后在这个组件的文件中scroll/index.vue中来接收并且监听（watch）这个数据的变化，一旦这个数据变化，我们便更新滚动条
十二、对于图片的懒加载
利用插件 cnpm install --save vue-lazyload 并且在main.js中引入并注册配置他从而使用
这个插件的使用只要将需要懒加载的图片的:src改成v-lazy即可
十三、关于下拉刷新的开发
第一步我们将之前的基础组件MeLoding导入进去，记得看一下导入的位置是在swiper下边，和swiper-slide是兄弟元素
我们给这个组件起一个ref，然后找到这个组件对其进行设置，利用swiper官网API提供的事件，首先监听滑动，即通过判断下拉的位置来加载 “再拉，再拉就刷给你看” 然后下拉到一定高度时，将文字换成‘够了啦，松开人家嘛’，但是这时候问题就出现了，如果判断swiper.translate > PULL_DOWN_HEIGHT 之后就设置this.pullDownText = '111';是有bug存在的原因是，一开始有一个值，你下啦到一定的高度有给了一个值，就会造成再次渲染而带来的抖动，所以我们要避免这个问题
如果想改变一个组件的数据，第一种方法就是传值；第二种方法是调用这个组件的API来进行修改。所以，我们采用第二种方法我们给MeLoading组件一个setText（）的方法，但是直接设置setText（text）{this.text = text}有会带来一个问题就是：如果这样写，就是子组件悄悄修改了父组件的值，但是父组件却不知道他的值被修改了，所以我们在data中给text重新定义一个值loadingText，这样就让这个值变成子组件的了，然后调用API修改值成功了，下一个就是监听text的值了，要watch一下
下拉制作完成接下来我们开始松手了，仍然调用swiper的API方法，让整个下拉停住不会弹，然后显示‘正在刷新’在正在刷新的过程中就要修改swiper的一些参数，让他不能再点击了。因为他自身是一个基础组件，所以，我们给父组件一个冒泡告诉他我刷新完了，父组件接收到后便让他回弹并且修改相应参数配置，我们利用一个定时器让他在舒心时停留几秒
最后一个注意点就是我们要给他设置一个标志位，就是在他下拉的时候，如果用户再次重复下拉，是禁止的，然后这些都下拉回弹完这个标志位就回到了原来的状态（同样可以将标志位方法推广到别的项目中，不错）
十四、关于上拉加载更多
类似于下拉刷新
首先用swiper提供的API接口swiper.isEnd来判断是否拉到了底部，然后在获取拉倒的高度，注意一下高度的计算，如果拉到了修改各种swiper的配置项，上拉松手后调用touchEnd()中的else来对各项进行配置，然后让他定住，当这些动作完成，给父组件发送一个函数this.$emit('pull-up', this.pullUpEnd);告诉父组件我完成了，然后更新热卖推荐update()是在recommend.vue中自己封装的方法
这里要注意update(){ return this.getRecommend(); }中的getRecommend必须返回的是一个Promise对象才能接着向下链接then，catch
then().catch(),then()当第一个then出了错误catach捕获后，下一个then能继续执行
我们在将一些数据诺一下位置，data(){return{}}中存放的是可变化的配置，然后我们将这些放在一个初始化函数中，在生命周期中调用这个函数即可
十五、关于回到顶部按钮的开发
要解决的第一个问题是什么时候显示他，什么时候隐藏他：默认隐藏，我们监听滚动事件scrollEnd，当滚动大于一定的高度的时候我们时他显示出来，我们自己来封装小图标自己的show和hideAPI方法，需要注意的是css中动画是怎么写的
第二个问题便是点击返回顶部，给组件封装一个API，当点击它要完成什么事情由父组件完成，父组件接受到这个信号后便开始做事情
十六、关于导航的显示和隐藏
均通过scroll来监听滚过的高度，来解决下面的两个问题，显示和隐藏方法还是自己封装API
要解决的第一的问题：当滚动到一定高度，导航变色，通过添加类和消除类来控制颜色变化
要解决的第二个问题：当translate>0就代表现在在下拉，这时候就隐藏导航，下拉结束后显示导航，但是这里有一个小bug：
swiper组件在开发滚动条时不是一个很好的选择，他在下拉正在停留还未返回到0的位置的时候，这个swiper组件就将自己的translate设置成了0，所以正在刷新停留的时候导航就显示了，所以我们要把那个pulling也传出来，通过他来判断是否正在下拉，如果正在下拉，便不显示导航，只有不在下拉状态才可触发changeHeaderStatus(translate)
changeHeaderStatus(translate){
if(translate > 0){
this.$refs.header.hide();
return;
}
//只要小于等于0均显示，还未弹回的时候swiper自己便判断为0，所以此处有bug
this.$refs.header.show();
this.isHeaderTransition = -translate > HEADER_TRANSITION_HEIGHT;
}
//改进bug
scrollEnd(translate,scroll,pulling){
// console.log(scroll.height);
// 重点在次，改进方法
if(!pulling){
this.changeHeaderStatus(translate);
}
this.isBacktopVisible = translate < 0 && -translate > scroll.height;//scroll.height为滚过一屏的高度，我们这里设置滚过一屏的高度就显示火箭小图标
},