使用vue-cli编写外卖app【header组件（外部组件）】

Vue-resource

安装

npm install vue-resource --save

配置

【main.js】

import VueRouter from 'vue-router'

Vue.use(VueResource)

使用

【app.vue】

        this.$http.get('/api/seller').then((res) => { // 成功的回调
            res = res.body
            if (res.errno === ERR_OK) { // 验证错误码
                this.seller = res.data //赋值到data上的seller
            }
        })

外部组件

把数据传递给子组件

【App.vue】

【header.vue】在props上注册

        props: {
            seller: {
                type: Object
            }
        }

布局及样式

为了能在不同dpi的设备上引入不同规格的图片，需要创建一个bg-image函数。

【mixin.styl】

bg-image($url)
  background-image :url($url+"@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image :url($url+"@3x.png")

调用这个函数

【header.vue】