1.先安装reset-css，清除样式表。但是这个和字体冲突，所以去修改源码。
2.在App.vue中放入<router-view/>，就可以用来显示子路由组件。
3.进入Home.vue组件，首先设置背景色，要给app、body、html三个都设置上高度，才可以撑满全屏。
4.rem的计算，1rem=这个html的文字大小。所以可以在App.vue中设置html{font-size:100px;} 这样14px=0.14rem。也可以选用其他的值。
5.页面请求
axios/request封装
先创建一个单例(配置基本路径和请求执行时间)、请求拦截、响应拦截
api封装
在组件中按需导入使用
6.制作轮播图 (细节问题)
实际上图片会高出一点点，因为这个图片带有文字的一些特性，存在一个底边的间距
一般写图片的时候，都会顺手加一个style="display:block"。
默认是行内块元素，存在文字的基准性问题，把它转为块级元素
7.popup弹出层
popup可以作为Home组件的子组件。点击搜索框跳转页面，点击取消跳回去。
this.$router.push("/home/popup");
this.$router.go(-1); //go(-1)代表调回上一个页面
为什么使用go()更好呢？
因为这个搜索框不只是一个可以使用，它有更多的功能，可以需要返回的页面不同。
为popup添加动画(使用到transition标签，去vue的官方文档查看)
进场动画 (这个动画vantui中有，可以使用)
出场动画
vantui中有这种动画，可以使用，但是有一些问题。
vantui中的是一个开启定位的弹出层，不能跳转路由，但是安卓的返回键是返回上一级路由，所以这个不可使用。
```
```
popup难点：怎么把弹出层的情况考虑完整。
要先确认一下popup中到底存在多少个引入的组件
1.历史记录与热门搜索区块 (一开始就显示的)
2.列表区块 (当搜索的时候，显示的)
3.产品区块 (当搜索关键字后，显示)
一.历史记录与热门搜索区块搭建
创建组件(History)-->作为子组件被引入到MyPopup组件中
页面样式
数据渲染
请求是在popup中还是在history中发送？
搜索框是父级的，父传子比较简单的，所以在mypopup组件中。
父传子：直接在父级中<history-hot :historyKeywordList="historyKeywordList"/>传递，
在子组件中接收export default { props:["historyKeywordList"] }
点击标签时，可以搜索。子传父
在子组件：this.$emit("tagClick",item); function为父组件定义函数，param为需要传递参数
在父组件：在父组件中子组件引用处添加函数
<history-hot @tagClick="tagClick"/>
tagClick(val){}
点击删除按钮，可以删除。
延时器：setTimeout(()=>{this.isShowHistory=false;},2000)
二.产品区块搭建
1.根据搜索内容不同，显示的区块不同。
2.字段改造
vantui框架需要的字段和后端传过来的数据的字段不同，怎么办？
##(小技巧)快速修改某个数组中一个或多个对象的属性名
先进行深拷贝，再做替换：
JSON.parse(JSON.stringify(data).replace(/name1/g, 'new_name1').replace(/name2/g, 'new_name2').replace(/name3/g, 'new_name3')...)
replace可以重复链式编程，name1表示旧属性名，new_name表示新属性名
3.商品中的价格进行处理
后端传过来的价格可能不会带小数点、元，所以要对价格进行处理
写一个过滤器(写到全局中，这样都可以使用。)
//时间的过滤器 过滤器的名字
Vue.filter("filterMoney",function(val){
return "￥ "+val.toFixed(2) +" 元";
//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 是 0 ~ 20 之间的值
})
使用：{{98 | filterMoney}}
4.为文字添加省略号
.title{
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
三.列表区块搭建(搜索“日”，出现相关的列表区块(List组件))
版权声明：本文为weixin_45246008原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。