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.准备数据

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



在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;
  1. 让背景图按比例缩放
background-size: width height;
  1. 让图片置于底层
z-index: -1;
  1. 背景模糊
filter: blur(10px);

4.最终效果

更新中...

外卖app的header组件开发的更多相关文章

  1. 【vue】饿了么项目-header组件开发

    1.数据传递的理解 在App.vue中用到了header组件,首先注册组件 components: { 'v-header': header } 然后才能引用 <v-header :seller ...

  2. vue2.0:(十)、外卖App商品组件部分和better-scroll

    本篇中继续来给大家介绍外卖App制作中的商品组件的部分. 好,第一步,我们把商品的大致框架在goods.vue中搭建出来: menu-wrapper是左边菜单栏,foods-wrapper是右边商品栏 ...

  3. ionic3+angular4开发混合app 之自定义组件

    这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...

  4. 项目Header组件的开发注意事项

    npm install stylus --save npm install stylus-loader --save 移动端一般采用rem布局方式 Header组件里iconfont的使用和代码优化: ...

  5. weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件

    1.自定义  过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...

  6. 项目vue2.0仿外卖APP(一)

    最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...

  7. 项目vue2.0仿外卖APP(四)

    组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

  8. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  9. Vue组件开发实例(详细注释)

    Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. markdown 字体颜色

     Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.但是它本身是不支持修改字体.字号与颜色等功能的!   CSDN-markd ...

  2. js的学习(window对象的使用)

    open方法: //语法:var winObj = window.open([url][,name][,options]);  //参数:url:准备在新窗口中显示那个文件.url可以为空字符串,表示 ...

  3. java MD5比较文件内容

    最近用到,记下来…… 功能: 对指定目录下的所有TXT文件,通过MD5比较内容,删除掉重复的文件.文件的扩展可以修改成.docx..doc..jpg..png,或者其它类型,根据需求灵活修改. pub ...

  4. cinder块存储 后端采用lvm、nfs安装配置

    #cinder块存储 后端采用lvm.nfs安装配置 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #cinder ...

  5. win10解决乱码问题

    Unicode是Unicode.org制定的编码标准,目前得到了绝大部分操作系统和编程语言的支持.Unicode.org官方对Unicode的定义是:Unicode provides a unique ...

  6. Python的集合

    1. Python的集合 1.1 集合的定义 在Python中, 集合set是基本数据类型的一种集合类型,它有可变集合(set())和不可变集合(frozenset)两种.Python中的集合set类 ...

  7. Opticks依赖库的下载和编译

    最近下载Opticks的代码编译,用其自带的retrieve-dependencies.bat下载依赖库,总是提示缺少模块. 分析了一下错误原因,根据命令窗的提示,手动下载如下配置文件: https: ...

  8. Linux分区的注意事项以及远程连接排错

    分区方式一般有三种 第一种:数据不是很重要 /boot(系统的引导分区): 系统引导的信息/软件 系统的内核   200M swap( 交换分区): 为了避免系统内存用光了导致系统 宕机 如果系统内存 ...

  9. C++彩色数据流动界面

    一个数据流动界面 #include <windows.h> #include <time.h> #include <cstdio> #include <str ...

  10. 4、libgdx应用框架

    (原文:http://www.libgdx.cn/topic/29/4-libgdx%E5%BA%94%E7%94%A8%E6%A1%86%E6%9E%B6) 模块 作为核心.libgdx提供了六个接 ...