php仿携程网站,vue模拟携程官网的搭建

仿造携程官网

题外话:

刚开始学前端的时候,有一天看到携程官网.就希望有一天能模拟搭出来.

自己拖拖拉拉的一直没整, 但是但是麻麻我终于完成了!!

(曾经亲爱的同事把传送门删掉了不感谢他了 fk)

感谢叶师兄拯救了我携程携程 源码仿携程源码

目录结构

基于vue+less进行开发,配合强行在携程复制的数据搭建的网站

目录是基于vue-cli的基础下搭建的.

build/config配置文件

src是主要内容(assets包括公用的js文件,css样式/components是公用组件/module是页面)

dist是打包后的文件夹 node_modules是依赖包 其他就是默认的配置文件

思路

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

1.首先是静态页面

刚刚学前端的时候 看到携程网就乱拳敲打.一点点html css强写,

后面工作的原因用了vue,就推倒旧的重新写了.

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

包括logo的header

导航栏

icon快捷入口

广告swipe和搜索框

各专题区

底部快捷入口

底部

电梯

fixed的交互框

有页面结构之后.就是基本功了.然后一点点搭页面, (优化把公用组件抽出来.)

2.然后是页面数据

哎,没想到好的办法.就搭页面的时候,顺便在携程网上面一点点的copy下来.<