使用vue实现饿了么的一些小知识点

1、设置webpack文件别名
在webpack.base.conf.js中找到：

resolve: {  
    extensions: ['.js', '.vue', '.json'],  
    alias: {  
      'vue$': 'vue/dist/vue.esm.js',  
      '@': resolve('src'),  
      'components': resolve('src/components')  
    }  
  },  

2、mock数据
在webpack.dev.conf.js文件中

//首先
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

//找到devServer,添加
before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      // 这里是你的json内容
      errno: 0,
      data: seller
    })
  }),
  app.get('/api/goods', (req, res) => {
    res.json({
      // 这里是你的json内容
      errno: 0,
      data: goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      // 这里是你的json内容
      errno: 0,
      data: ratings
    })
  })
}

3、设置默认路由

export default new Router({  
  linkActiveClass: 'active',    // 配置路由的默认class
  routes: [  
    {path: '/', redirect: 'goods'},  // 设置默认路由
    {path: '/goods', component: goods},  
    {path: '/ratings', component: ratings},  
    {path: '/seller', component: seller}  
  ]  
}) ;

4、如何在手机端预览页面
使用ipconfig查看本机地址，如192.168.1.2:8080/#/goods，进入草料二维码网cli.im，生成二维码扫一扫进行预览。
注意：需要保证手机与电脑在同一个局域网

5、border 1px的适应问题
对此就涉及到像素和DPR的关系，可以看一下这篇移动web开发之像素和DPR。
写移动端时，是按照设计稿标注的像素除以设备的DPR来写真实的像素。不同的DPR设备呈现的视觉效果不一样，解决方案如下：

.border-1px($color) {
    position: relative;
    &::after{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-top: 1px solid $color;
        width: 100%;
        content: ' ';
      }
}
@media (-webkit-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
     }
}
@media (-webkit-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
     }
}
@media (-webkit-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33);
        }
     }
}

6、vue-resource提供HTTP服务，处理前后端交互
（1）在package.json的dependencies中声明vue-resource相应的版本：'vue-resource": "^1.5.1"。使用cnpm install安装。
（2）在main.js中import引入vue-resource；使用Vue.use(VueResource)全局注册；
（3）在APP.vue中使用vue-resource获取数据

created() {
    this.$http.get('/api/seller').then(response => {
      response = response.body;
      if (response.errno === ERR_OK) {
        this.seller = response.data;
      }
    });
  }

7、CSS Sticky footers布局
使用场景：如果页面不够长的时候，页脚块黏贴在视窗底部；如果够长，页脚块会被内容向下推送。
（1）将页脚的顶部外边距设为负数

// html

    

        

            content
        
    
    



// css

（2）使用flexbox弹性布局

// html

    

        content
    
    



//css

8、实现菜单按钮和商品的左右联动
这里需要用到better-scroll插件，可npm安装。
思路：
（1）获取右边每个分类商品的纵坐标值区间来确定对应左边菜单的index值，给其加上currentIndex类名高亮显示。
（2）当点击左边菜单分类按钮时，根据better-scroll插件的scroll事件，实现映射。

<-- html部分 -->
  <-- 左侧菜单 -->
    

        

          

          
            {{item.name}}
          
          
        
      
  <-- 右侧商品 -->
      

        

          

            
{{item.name}}
          
        
      

// JS部分

9、利用ref属性可以获取到dom元素或者是子组件，从而可以调用子组件的方法
（1）操作DOM元素：

// html

// js
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');

（2）调用子组件的方法或属性：

// html

// js
// 调用子组件中的drop方法
this.$refs.shopcart.drop(target); 

10、使用better-scroll，点击事件在手机模式触发一次，但在pc模式会触发两次，需添加

 if (!event._constructed) {
    return;
}

判断是否是原生点击事件。