一，首页搜索框部分

1，安装tsules依赖（css预编译器）

npm install stylus --save
npm install stylus-loader --save

2，设置home.vue组件和vue组件

组件化开发，把这个header搞成一个组件，然后放在home组件的最上边。
也就是home是个页面级别的组件，而header是它的组成部分。

3，对header组件进行代码书写

采用flex配合浮动布局方式

<template><div class="header"><div class="header-left">返回</div><div class="header-input">输入城市景点/游玩/主题</div><div class="header-right">尝试</div></div>
</template><script>
</script><style lang="stylus" scoped>// 1rem=html font-size=50px.headerheight:.86remline-height :.86remdisplay:flexbackground-color :#00bcd4color:#fff.header-leftwidth:.64remfloat:left.header-rightwidth:1.24remfloat:righttext-align:center.header-inputflex:1height :.64remline-height :.64rembackground-color:#fffborder-radius :.1remmargin-top :.12remmargin-left :.2remcolor:#ccc
</style>

实现的效果如下：

4，iconfont的使用

第一步：创建项目，然后选择想要的图标，生成代码：

第二步：将链接导入index.html中

第三步：使用代码：

最后效果：

5，优化一，把样式中常用的样式用变量形式写。

第一步，新建一个styl文件
第二步，把常用的部分设置成变量，如这里的背景色

第三步，将变量导入文件进行使用

这样，想修改背景颜色的样式，直接改这个文件中的颜色就可以。

6，将这个部分的代码推送到码云上

二，首页轮播图部分的制作

1，先在码云上创建新的分支

将新分支拉到本地来：

 git pullgit checkout index-swiper

2，利用轮播插件制作轮播图

安装这个插件：

npm install swiper vue-awesome-swiper@2.6.7 --save

这里有教如何全局使用：

创建新的组件：swiper，复制github上的这段代码就可以使用。

这样的话，这个组件就做完了，现在可以在首页引入使用这个组件了。

3,在轮播图插入图片

实现的效果

这里有个注意的点，因为图片的加载时间比其他块状元素慢，而这个轮播i图区域的高度又是靠图片撑开的，如果底下有其他页面元素的话，在页面刷新的时候，就会先在上面显示，图片一刷新，就会被挤下来。
为了避免这种情况的发生，需要事先把轮播图区域高度限定掉，但是图片的大小是不一样的：

如果限定父盒子height等于图片高度，就会出问题。
于是这里可以利用padding背景透明的特性，不设置父盒子高度，而是设置父盒子的padding

但是我用的这个swiper并不存在这个问题，应该是已经修复了。

当想把小圆点的样式变更的话，因为swiper是定义在全局使用了，但是此组件的css设置scoped了，所以直接在本组件设置样式没用。
所以，得采取新的方法：

3，这就完成了轮播图的制作，接着放到码云上就可以了。

三，图标区域的代码编写

1，新建分支，然后拉取到本地，切换分支：

2，新建icon组件，并在home组件中引入使用

3，创建图标的基本框架

设置好宽高，和display,利用百分比，flex，浮动，定位等布局都是可以实现的。

4，在图标区域增加轮播的效果

但是，这时候，第九个元素会在底下生成，并且因为overflow:hidden把它隐藏了，要实现轮播，则需要利用vue的计算属性。

于是：

     computed:{pages:function(){const pages=[]    //需要执行两次v-for,故肯定是二维数组this.imgList.forEach((item,index)=>{const pageIndex=Math.floor(index/8)  //取得第几页if(!pages[pageIndex]){pages[pageIndex]=[]    //将内层设置为数组，这样后面才可以用push方法}pages[pageIndex].push(item)})return pages}}

使用时：

5，将多出来的文字以省略号截断

6，将本部分代码提交码云

git add ./
git commit -m "add icons"
git push
git checkout master
git merge origin/index-icons
git push

四，推荐组件的开发

1，在码云上创建新的分支,拉取到本地，切换到这个分支。

2,建立两个组件，完成本部分的页面创建。

五，周末游组件的开发

和四种中一样

六，利用axios实现数据传递

1，现在没有后台，利用static文件夹模拟后台

2，安装axios

npm install axios --save

3,引入并全局注册axios

4，在这里我没按教程来，而是采用vuex的方式完成组件间传值

现在axios已经注册到vue的原型对象上了。就可以在vuex的文件中直接使用：

在home组件中执行这个函数

5，再利用getters把state中的数据转化一下：

6，再在各个组件中引入使用

六，底部区域的创建

再提交代码，首页部分就完成了。

慕课网仿去哪儿项目笔记--（二）-首页部分相关推荐

企业级博客项目笔记(二)
企业级博客项目笔记(二) 一.数据持久化 1.JPA简介 JPA(Java Persistence API)是用于管理Java EE 和Java SE 环境中的持久化,以及对象/关系映射的Java A ...
慕课网前端JS面试技巧笔记
前言关于面试前端水平的三个层次基层工程师-基础知识高级工程师-项目经验架构师- 解决方案几个面试题题目很多,做具有代表的题目,举一反三 js 中使用 typeof 能得到哪些类型 (== ...
五子棋的实现“慕课网五子连珠的笔记”
慕课网的视频首先创建了一个类,这个类继承了View,去实现这个类的构造方法,实现其两个参数的构造方法,老师建议自己写的过程中对这些构造方法都进行实现. 在布局文件中对这个类进行使用,注意是包名.宽高 ...
慕课网--网上商城mmall项目---部署手记
1.先在服务器部署好java,maven,nodejs环境. 2.然后安装nginx,tomcat,vsftp,git(一般默认会有)等软件 , 其中vsftp安装过程参照我上一篇文章. 3.在慕课网 ...
react 网易云音乐实战项目笔记
0.项目规范一.路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组 1. 路由重定向访问 /路径 => ...
尚硅谷外卖项目笔记二
目录 1. 商家整体界面搭建 2. 模拟(mock)数据/接口 3. vue transition动画 4. 滚动实现(better-scroll) 5. 滚动右边食物列表,同步更新左侧菜单 6. 点 ...
微信公众号项目笔记二
一.项目介绍通过公众号页面调用系统接口,完成物流系统客户签收功能. 1界面展示使用html5+css布局,使用weui样式库. 2Web项目使用asp.net MVC4技术.接口调用使用jquer ...
慕课网初识python_初识Python笔记
初识Python 基本数据类型基本数据类型: 整数十六进制用0x前缀和0-9,a-f表示浮点数整数运算永远是精确的,而浮点数运算则可能会有四舍五入的误差字符串以''或"" ...
cocos2dx打飞机项目笔记二：BulletLayer类
BulletLayer.h 内容如下 1 class BulletLayer : public cocos2d::CCLayer 2 { 3 4 public: 5 6 CC_SYNTHESIZE(b ...
项目笔记二-----------------数据展示
数据展示(基于vue框架) 数据展示数据展示(基于vue框架) vue框架的建立对vue项目的编写导航栏顶部介绍第一个分析图表第二个分析图表 JS代码支持全部代码 vue框架的建立新建 ...

慕课网仿去哪儿项目笔记--（二）-首页部分