仿黄轶老师 Vue仿饿了么app项目总结name: 'fade' 将自动拓展为.fade-enter，.fade-en

better-scroll

Better-scroll可能是目前最好用的移动端滚动插件插件在移动端使用时需要设置 click：true，否则移动端滑动无效

分开设置css样式

1，图标icon.css--文字图标样式，通过icomoon.io网站，将svg图片转成文字图标样式

2，公共base.css--处理设备像素比的一些样式，针对border-1px问题，不同设备像素比，显示的线条粗细不同

3，工具mixin.css--设备border-1px样式和背景样式

sticky-footer布局

在这个项目的header组件的详情页采用stick-footer布局

特点：如果页面内容不够长，页脚块粘贴在视窗底部；如果内容足够长，页脚块会被内容向下推送

实现：父级 position:fixed，内容设为padding-bottom:64px，页脚相对定位，margin-top:-64px，clear:both为了保证兼容性，父级要清除浮动

参考：www.jianshu.com/p/3853024d5…

要求自适应布局

1，左侧宽度固定，右侧宽度自适应

左侧固定width：80px，右侧自适应

parent:
    display:fiexd;
child-left:
    flex:0 0 80px
child-right:
flex:1

2，元素宽度自适应设备宽度，且元素要求等宽高样式

商品详情页面的商品图片展示样式

.img_header {
    position:relative
    width:100% // width是 设备宽度
    height:0
    padding-top:100% // 高度设为0,使用padding撑开
    .img {
        position:absolute //定位布局
        top:0
        left:0
        width:100%
        height:100%
    }
}

背景模糊效果

filter：blur(10px)

注意，所有在内的子元素也会模糊，包括文字，所以采用定位布局，背景单独占用一个层，ios有一个设置backdrop-filter:blur(10px)，只会模糊背景,但不支持android

transition过渡

在购买控件中使用transition过渡效果，实现添加减少按钮的动效，和小球飞入购物车的动效（模仿贝塞尔曲线的效果）

name-String用于自动生成css过渡类名

name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 "v"

fade-enter
fade-enter-active
fade-leave
fade-leave-active

seller组件

问题一：seller页面中商品商家实景图片横向滚动

解决方案：每个 li 要 display：inline-block，因为width不会自动撑开父级ul，所以需要将计算后的宽度赋值给ul的width，（每一张图片的width+margin）*图片数量-一个margin，因为最后一张图片没有margin

同时new BScroll里面要设置scrollX: true,eventPassthrough: 'vertical', // 滚动方向横向

问题二：打开seller页面，无法滚动

问题分析：出现这种现象是因为better-scroll插件是严格基于DOM的，数据是采用异步传输的，页面刚打开，DOM并没有被渲染，所以，要确保DOM渲染了，才能使用 better-scroll，

解决方案：用到mounted钩子函数，同时必须搭配this.$nextTick()

问题三：在seller页面，刷新后，无法滚动

问题分析：出现这种情况是因为mounted函数在整个生命周期中只会只行一次

解决方案：使用watch方法监控数据变化，并执行滚动函数 this._initScroll();this._initPicScroll();

goods,ratings,seller组件之间切换时会重新渲染

在 app.vue 内使用 keep-alive，保留各组件状态，避免重新渲染

<keep-alive>
    <router-view :seller="seller"></router-view>
</keep-alive>

vue-router

使用<router-link>组件完成导航，<router-link> 默认会被渲染成一个 <a> 标签，但必须使用 to属性，指定连接

// app.vue
 <!-- 导航 -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>

<!-- 路由出口 组件渲染容器 -->
<router-view></router-view>

// router: index.js

import Vue from 'vue';
import Router from 'vue-router';
import goods from 'components/goods/goods.vue';
import ratings from 'components/ratings/ratings.vue';
import seller from 'components/seller/seller.vue';

Vue.use(Router);

const routes = [{
  path: '/',
  redirect: '/goods'
}, {
  path: '/goods',
  component: goods
}, {
  path: '/ratings',
  component: ratings
}, {
  path: '/seller',
  component: seller
}];

axios

在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios

组件提取管理

将相同样式或功能的区块单独提出来，作为一个组件。另外组件中用到的图片等资源就近维护，即可以考虑在组件文件夹中新建images文件夹。

抽离组件遵循原则：要尽量遵循单一职责原则，复用性更高，不要设置额外的margin等影响布局的东西

打开app应用，默认显示 goods 页面内容

想默认显示goods页面内容，有两种方法，一种是利用重定向，另一种是利用vue-router的导航式编程

1，重定向

  routes: [
    {
      path: '/',
      redirect: '/goods'  //重定向
    },
    {
      path: '/goods',
      name: 'goods',
      component: goods
    },{
      path: '/ratings',
      name: 'ratings',
      component: ratings
    },{
      path: '/seller',
      name: 'seller',
      component: seller
    }
  ]

2，导航式编程

router.push('/Goods');

关于ESlint

eslint 是一个js代码风格检查器，配合vue-cli脚手架中的热更新，可以很方便的定位和提示错误。在公司多人协作开发时可以确保代码风格保持一致，可以很方便的阅读他人的代码

手机访问项目

1、在config文件夹中的index.js中的host选项，将本地localhost改为0.0.0.0

2、在cmd中输入ipconfig查看本地IP,

4、端口号访问(http://192.168.0.110:8080),将这个网址复制到网页版“草料二维码”中，用QQ扫码访问即可

仿黄轶老师 Vue仿饿了么app项目 总结