饿了么--vue项目总结

来迟了来迟了，早就应该动手写了，无奈卡在webpack的学习中，深陷泥潭。

github源码地址：饿了么项目源码

饿了么项目包含以下三个方面的技术点，以及所了解的知识。
1. 流程及开发方法：

组件化、模块化的开发模式
学会模拟json后端数据，前后端分离开发
了解webpack的打包原理

2. 第三方组件

学会使用vue-router开发单页应用
学会使用vue-resource与后端数据交互
学会如何在Vue.js框架里和第三方JS插件交互

3. 设计思想与模式

了解移动端设备像素比的概念
学会解决移动端1px边框问题
学会移动端经典的css sticky footer布局
学会flex弹性布局

第一个方面从webpack设置入手：

在build/webpack.base.conf.js文件下，可以看到基本的webpack设置（出入口文件位置，后缀补充以及别名等）：

module.exports = {
  context: path.resolve(__dirname, '../'),
  // webpack编译的入口文件
  entry: {
    app: './src/main.js' 
  },
  output: {
    path: config.build.assetsRoot,
    // 生成的文件名字
    filename: '[name].js',
    // 请求的静态资源的绝对路径
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    // 自动补全文件后缀
    extensions: ['.js', '.vue', '.json'],
    // 别名,只针对于js库，css的引入还是要写相对路径，不能省略
    alias: {
      '@': resolve('src'),
      // vue:'vue/dist/vue.js',
      'components': path.resolve(__dirname, '../src/components'),
      'common': path.resolve(__dirname, '../src/common'), //当在js文件中import其他文件时路径直接写commont相当于../src/common
    }
  },

然后在webpack.dev.conf.js文件中，设置了数据所在的位置，用于模拟后端数据的获取。

// 数据获取
var express = require('express')  // express 是nodejs框架
var apiServer = express()  
var bodyParser = require('body-parser')  
apiServer.use(bodyParser.urlencoded({ extended: true }))  
apiServer.use(bodyParser.json())  
var apiRouter = express.Router()  
var fs = require('fs')  
apiRouter.route('/:apiName') //接口路径  
  .all(function (req, res) {  
    fs.readFile('./db.json', 'utf8', function (err, data) {  //读取接口文件  
      if (err) throw err  
      var data = JSON.parse(data)  
      if (data[req.params.apiName]) {  
        res.json(data[req.params.apiName])  
      }  
      else {  
        res.send('no such api name')  
      }  
  
    })  
  })  
  
// 数据所在的位置
apiServer.use('/api', apiRouter);  
apiServer.listen(3000, function (err) {  
  if (err) {  
    console.log(err)  
    return  
  }  
  console.log('Listening at http://localhost:' + 3000 + '\n')  
})

之后config/index.js目录下

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static', //被webpack编译处理过的资源文件都会在这个目录下
    assetsPublicPath: '/',      //根目录
    proxyTable: {                //解决跨域问题
        '/api': 'http://localhost:3000/'  
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    devtool: 'cheap-module-eval-source-map', //编译输出格式
  },
}

webpack打包原理：

现象：假如说需要引入一大堆的js/css文件，且相互之间还存在引用关系，手动处理的时候就得按照一定的顺序。

解决：webpack将一大堆的文件都从一个入口引入，然后自动处理。（将模块的前后关系打包成一个js，指定js的单独打包等等），webpack实现模块化的管理。

功能：

1、根据模板生成html,并且自动处理上面的css/JS引用路径

2、自动处理img里图片路径，css样式中背景图的路径...字体引用

3、开启本地服务器，变写代码边自动更新页面内容

4、编译jsx、es6、sass、less、coffeescript等等并添加md5、sourcemap等辅助

5、异步加载内容，比如弹出框，不需要时不加载到dom

6、配合vue.js、react等框架开发等。

第二方面vue的主要文件设置：

根目录下的index.html设置viewport移动端视图，并且引入重置样式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vueeleme</title>
    <meta name="viewport" content="width=device-width,inital-scale=1.0,
    maximum-scale=1.0,user-scalable=no">  // 这个meta标签使得页面宽度等于设备宽度，页面的缩放默认为1，且用户不能缩放。
    <link rel="stylesheet" href="./static/css/reset.css">    //基础样式重置
  </head>
  <body>
    <div id="app"></div>        //挂载所需的id（在main.js中设置）
    <!-- built files will be auto injected -->
  </body>
</html>

main.js：导入VueRouter 管理路由，导入 VueResource实现数据交互。

///////main.js文件部分内容：
const routes = [        //设置路由及相应组件
        {
          path:'/',
          redirect:"goods"    //根目录下重定向到主页面
        },
        {
          path:'/goods',        //不同的路由使用不同的组件
          component:goods    
        },
        {
          path:'/ratings',
          component:ratings
        },{
          path:'/seller',
          component:seller
        }
]
const router = new VueRouter({        //将路由导入VueRouter
    mode:'history', //可以去掉#
    'linkActiveClass': 'active', 
    routes            
})
const app = new Vue({            //渲染App.vue， 挂载到idnex.html中的#app中
  router,
  render: h => h(App)
}).$mount('#app')

App.vue 头部采用组件的形式，导航采用flex布局三等分，内容利用路由router-view进行显示。

<template>
  <div>
    <!-- 头部 -->
    <v-header :seller="seller"></v-header>        //组件化
    <!-- 中部导航栏 -->
    <div class="tab border-1px">                  //flex三等分布局
        <div class="tab-item">
          <router-link to="/goods">商品</router-link>
        </div>
        <div class="tab-item">
          <router-link to="/ratings">评论</router-link>
        </div>
        <div class="tab-item">
          <router-link to="/seller">商家</router-link>
        </div>
    </div>
    <!-- 路由改变时，显示相应的内容 -->
    <keep-alive>
      <router-view :seller="seller"></router-view>            //父组件传递数据
    </keep-alive>
  </div>
</template>

第三方面设计思路：

设备像素比：devicePixelRatio，视觉稿是以iphone6的375×667屏幕屏幕高度作为基准，为了达到高清效果，视觉稿的画布大小会是基准的2倍。（对iphone6而言：原先的375×667，就会变成750×1334）。而在设计时候的数值为设计稿上的一半。

并且需要知道：1px 的 CSS 像素并不一定等于 1px 的物理像素，不同的设备会根据其对应设备像素比决定使用多少个物理像素显示 1px 的 CSS 像素。所以，在移动端不建议使用 px 作为布局单位，而是应该使用 rem 或者百分比作为布局单位。

参考链接：理解设备像素比

移动端1px边框： 利用伪类元素设置边框

border-1px($color)
  position : relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    border-top 1px solid $color
    width: 100%
    content: ''

“Sticky Footer”: 指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。

参考链接：各种CSS实现Sticky Footer

自适应布局：flex，两端的line自适应

html:
                    <div class="title">
                        <div class="line"></div>
                        <div class="text">优惠消息</div>
                        <div class="line"></div>
                    </div>

CSS:
            .title
                display: flex
                margin: 28px auto 24px auto
                width:80%
                .line
                    flex:1
                    position:relative
                    top: -6px
                    border-bottom:1px solid rgba(255,255,255,.2)
                .text
                    padding:0 12px
                    font-size:14px
                    font-weight:700