vue高仿饿了么APP总结(持续更新)

vue基础环境搭建

使用 vue 脚手架 vue-cli 开启项目,npm 全局安装

1	npm install -g vue-cli

查看是否安装成功 vue list
cd 进入到创建好的 sell (项目名称，可自取)目录下,执行 vue init webpack, 这样就创建好了一个完整项目所需的配置文件。webpack 是一个环境，它可以将各种资源打包，然后输出 js,css,渲染图片等。
接着同样在主目录 sell 下执行 npm install 安装所需的依赖插件，同时建立 node_modules 目录，此目录存放所有需要用到的插件路由。
如果没出现任何错误的话，执行 npm run dev ，打开浏览器输入 localhost:8080 就能进入到项目的页面了，这个页面是 vue 准备的起始页面。

准备工作

流程：需求分析——项目资源准备——图标字体制作——项目目录设计——mock 数据

需求分析

根据设计稿确定页面的主体结构，从内容上看，页面分为头部商家信息区以及中间的食品选择区还有最后的购物车。头部商家信息又包括左侧 logo 图片，右侧商家名称、配送信息、优惠信息，上中下排布；以及一个详细的商品信息浮窗。中间部分分为商品页、评论页和商品信息页，点击每一个标题能不刷新的切换相应的内容。底部的购物车能根据顾客所选的商品数计算价格并给予不同的信息提示。

项目资源准备

导入一些设计师给的切图以及素材，方便随时查看制作。

图标字体制作

进入图标制作网站 icomoon.io,点击制作按钮，选择素材图中的 SVG 图片，将其生成图标字体，点击右下角的 download 按钮下载这些图标。最后将 font 目录以及 style.css 文件拷贝到我们的项目目录下，就能使用这些图标字体了。

项目目录设计

所有的代码都放在 src 目录下，其中 App.vue 是整个项目的入口文件，一般建立几个目录如 common，components 用来存放对应的文件，组件化模块的思想体现在 components 下建立各个模块的单独目录，在里面存放素材图片以及 .vue 文件，这样是为了方便就近维护。

mock数据

这是很重要的一个环节，前端自己做页面，需要一些假的数据来模拟操作，后台数据存放在 data.json 中。
vue2.0的话首先在 webpack.dev.conf.js 中，引入文件

var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

接着需要编写路由，vue2 的语法跟 vue1 不同，是这样子写路由的

devServer: {
  before(app){
      app.get('/api/seller',(req,res) => {
        res.json({
            errno:0,
            data:seller
        })
      }),
      app.get('/api/goods',(req,res) => {
        res.json({
            errno:0,
            data:goods
        })
      }),
      app.get('/api/ratings',(req,res) => {
        res.json({
            errno:0,
            data:ratings
        })
      })
    },
}

页面骨架

vue-router

安装一个插件，现在 package.json 里配置依赖，然后执行 npm install 会自动安装好 vue-router ,如果失败报错了的话可以手动去 GitHub 下载，然后导入到项目目录下的 node_modules 下即可。

手机端 1px 像素实现

在 PC 端开发可以通过 ifconfig( window 下为 ipconfig )查看 ip 地址,然后将 localhost 更换为你电脑上的 ip 地址，并且让你的手机和电脑在同一个局域网，这样就能在手机上实时预览界面。

由于 dpi 的问题，设置 1px 的 border 在电脑上看没问题，但是真正在手机上显示却是 2px 的粗线，为了解决这一问题，就需要写一个方法，在不同的 dpi 上适应不同的样式,这里使用的是 styl 语法

//统一写方法，方便重复调用
border-1px($color)
    position: relative
    &:after
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: ''

@media (-webkit-min-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-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.5)
            transform: scaleY(0.5);

六 head 组件请求后端数据-vue-resource

先在 package.json 中吧 deploy 写好，然后在 main.js 中引入

1 2	import VueResource from 'vue-resource'; Vue.use(VueResource);

接着在 App.vue 中加入如下代码

<script type="text/ecmascript-6">
  const ERR_OK = 0;
  export default {
    data () {
        return {
            seller: {
                avatar: 'http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg'
            }
        };
    },
    created () {
        this.$http.get('/api/seller').then((response) => {
            response = response.body;
            if (response.errno === ERR_OK) {
                this.seller = response.data;
            }
        });
    }
  };
</script>

此时数据已全部获取并且存储到 sell 数组中。

七 good 组件开发

better-scroll 运用

使用 better-scroll 库可以使组件上下滑动，无滚动条。

_initScroll() {
                this.meunScroll = new BScroll(this.$refs.menuWrapper, {
                    click: true
                });
                this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
                    probeType: 3
                });
                this.foodsScroll.on('scroll', (pos) => {
                    this.scrollY = Math.abs(Math.round(pos.y));
                });
            }

初始化，注意:为了在页面载时能够让 DOM 准确计算内容区滑动的高度，上面的方法要放在 vue 提供的 $nextTick() 中，确保下次 DOM 更新循环结束之后执行延迟回调。