开发去哪儿网App (3.21~

【知识点】
① iconfont图标的使用，从网上下载，然后放到对应文件夹下面引入。
② stylus全局css变量使用，在css文件夹下面创建一个文件，然后把一些公共样式文件用变量，最后在css地方引入这个变量
③ 简化文件路劲，在webpack文件里面做一些配置

屏幕快照 2020-03-21 下午6.35.19.png 屏幕快照 2020-03-21 下午6.36.34.png

④ 首页轮播图
* 下载插件 npm install vue Awesome swiper
* 引入组件，vue.use使用

屏幕快照 2020-03-21 下午7.25.24.png

• 宽高固定比

  
  [图片上传中...(屏幕快照 2020-03-21 下午7.41.26.png-eb3b55-1584792064848-0)]

屏幕快照 2020-03-21 下午7.41.26.png

• css穿透 /deep/: vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。

屏幕快照 2020-03-21 下午7.51.36.png

【图标区域的布局和逻辑】

屏幕快照 2020-03-21 下午9.13.11.png

① 字体很长时候用省略号表示，因为这个经常用到，可以用mixin方法。

② 有轮播效果，超过八个图标可以滑动。

屏幕快照 2020-03-21 下午9.19.40.png

【推荐列表】

屏幕快照 2020-03-21 下午9.27.42.png

① 布局采用 display: flex,右边区域flex:1. 右边P标签用行高来拉开距离。img设置一个padding值拉开左右距离。

【请求数据】
① 请求的接口自动转到本地模拟的数据，用到webpack里面的一个功能proxy。

屏幕快照 2020-03-22 上午9.23.16.png

【城市列表页】

屏幕快照 2020-03-22 上午9.47.04.png

① 路由配置，首先在入口页配置路由，然后在页面用router-link标签
② 返回箭头用position: absolute定位top left: 0
③ 搜索框布局，在外层div，设置一个padding左右值，里面input框宽度100%。

屏幕快照 2020-03-22 上午10.09.37.png

④ better-scroll插件的使用,npm install better-scroll
⑤ mounted 在页面dom挂载完毕执行。ref可以取到dom的值

屏幕快照 2020-03-22 上午11.56.15.png

⑥ 右侧字母布局， 用绝对定位，然后垂直居中用flex

屏幕快照 2020-03-22 下午12.05.29.png 屏幕快照 2020-03-22 上午11.55.31.png

⑦⑧⑨