vue模拟携程官网的搭建

仿造携程官网

题外话:

刚开始学前端的时候,有一天看到携程官网.就希望有一天能模拟搭出来.
自己拖拖拉拉的一直没整, 但是但是麻麻我终于完成了!!
(曾经亲爱的同事把传送门删掉了不感谢他了 fk)
感谢叶师兄拯救了我携程携程 源码仿携程源码

目录结构

• 基于vue+less进行开发,配合强行在携程复制的数据搭建的网站
• 目录是基于vue-cli的基础下搭建的.

• build/config配置文件
• src是主要内容(assets包括公用的js文件,css样式/components是公用组件/module是页面)
• dist是打包后的文件夹 node_modules是依赖包 其他就是默认的配置文件

思路

小小讲一下自己拿到携程官网的时候是怎么拆开的(如果写的不对请麻烦各位指出指导)

1.首先是静态页面

刚刚学前端的时候 看到携程网就乱拳敲打.一点点html css强写,
后面工作的原因用了vue,就推倒旧的重新写了.

• 页面结构是分为这几块:(如图)

  1. 包括logo的header
  2. 导航栏
  3. icon快捷入口
  4. 广告swipe和搜索框
  5. 各专题区
  6. 底部快捷入口
  7. 底部
  8. 电梯
  9. fixed的交互框