外卖app的header组件开发

1.webpack框架创建

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

在创建过程中，它会问你是否需要安装vue-router等问题，我的建议是都不要安装，因为它给你指定的vue-router目录可能部适合你的编程习惯，还有它的代码规范可能和你不同。

不过，如果你选择全部安装它给你提供的也不要紧，你可以在‘es...’中改变它的编程规范。

2.准备数据

这次所用的数据，是自己模拟的一个后台数据，需要为它配置路由

image.png

在build/dev-server.js中导入josn文件，为它配置路径

//定义数据
var appData = require('../data.json');//拿到变量
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();

apiRoutes.get('/seller', function (req, res) {
    res.json({
        errno: 0,
        data: seller
    });
});

apiRoutes.get('/goods', function (req, res) {
    res.json({
        errno: 0,
        data: goods
    });
});

apiRoutes.get('/ratings', function (req, res) {
    res.json({
        errno: 0,
        data: ratings
    });
});

app.use('/api', apiRoutes);

var compiler = webpack(webpackConfig)

var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

数据拿到了之后就开始编写网页的头部了。

3. 编写header组件

1.拿到数据

我们首先要做的，是从data.json里拿到数据，那首先要做的，就是安装vue-resource

安装之后，记得一定要在main.js中引用

import VueResource from "vue-resource";
Vue.use(VueResource);

然后在app.vue中拿数据

const ERR_OK = 0;
export default {
    data() {
        return {
            seller: {}
        };
    },
    created() {
        this.$http.get('/api/seller').then((response) => {
            response = response.body;
            if(response.errno === ERR_OK) {
                this.seller = response.data;
            }
        });
    },
  components:{
    'v-header':header
  }
}

在这里注意，我们把0先定义为一个常量，是为了将来我们要改变请求指令时，只需要改变常量的值就可以了。

2. header组件接收数据

我们要header组件可以接收到数据，首先要做的，就是让header组件找到数据

<v-header :seller="seller"></v-header>

然后，在header.vue里定义props接收数据

props: {
      seller: {
        type:Object
      }
    }

3.布局和引用数据

1.v-if先确定是否存在

<div v-if="seller.supports" class="support">
            <span class="icon" :class="classMap[seller.supports[0].type]"></span>
            <span class="text">{{seller.supports[0].description}}</span>
          </div>

在编写support部分时，我先用了v-if判断，原因在与这一部分不是每个商家都有的，为了避免没有的时候报错，先用v-if判断一下，没有的话就不存在这一部分

2.classMap

因为对应的class背景不同，所以把几个class名封装成一个数组，用哪个就取哪个。

created() {
      this.classMap = ['decrease','discount','special','invoice'];
    }

:class="classMap[seller.supports[0].type]

3.一些重要的css样式

1. 让图片和文字对齐，在图片里加

vertical-align: top;

2. 让背景图按比例缩放

background-size: width height;

3. 让图片置于底层

z-index: -1;

4. 背景模糊

filter: blur(10px);

4.最终效果

image.png

更新中...