去哪儿-02-HeaderDev

页面组件化

在home目录下创建components目录。应用页面组件化的思想，将一个复杂的页面拆分成一部分一部分的内容，对于Home.vue来说，它对应的是整个页面最外层的一个容器组件，它会被拆分成很多很多小的组件，由这些小的组件帮助我们整合成最终的复杂页面。把拆出来的一个个小的组件都放在components目录下，比如当前要进行的是header区域的开发，就在components目录下创建Header.vue组件。

在Home.vue中引入小组件：

import HomeHeader from './components/Header.vue'export default {name: 'Home',components: {// HomeHeader: HomeHeader    下面是ES6的写法HomeHeader,}}

在Home组件中使用小组件

// 注意是小写，与其对应的组件名称的写法是不同的
<home-header></home-header>

此时，我们要做的header区域的开发，就是在做Header.vue组件的开发

使用css辅助开发工具stylus进行Header组件开发

stylus像less，sass一样，可以帮助我们在css中使用一些变量快速的编写css代码。

安装

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

应用

<style lang="stylus" scoped>.header display: flex line-height: .86rembackground: #00bcd4color: #fff.header-leftwidth: .64remfloat: left.header-inputflex: 1 height: .64rem line-height: .64rem margin-top: .12remmargin-left: .2rem background: #ffffffborder-radius: .1remcolor: #ccc.header-rightwidth: 1.24remfloat: right text-align: center
</style>

几点说明：
1. <style lang="stylus" scoped></style> 表示使用stylus的方式进行css样式的代码编写，要遵循stylus的编写方式，scoped表示在这个组件中编写的样式不会对其他组件产生影响。
2. 设计稿是一个2倍尺寸的图片，所以量出来的header的高度是86px，但实际上是43px。
3. 1rem = html font-size = 50px，在reset.css中font-size是50px， rem是相对于这个50px的尺寸，所以43px实际上对应的是.86rem，刚好是测量出来的那个像素数除以100所得到的值。这些像素单位之间的关系，参考这篇简书

iconfont的使用

下载流程： iconfont —> 图标库 —> 官方图标库 —> 大麦官方图标库 —> 将需要的图标放入购物车 —> 添加至Travel项目中 — > 下载至本地
解压后，将里面的字体文件.eot, .svg, .ttf, .woff放入在项目中的styles目录中创建的iconfont目录中，将iconfont.css文件放入styles目录下。
修改iconfont.css文件中的对应iconfont目录下的四个文件的文件路径。base64的不用改。

引入iconfont:

// 在项目的入口模块main.js中import
import './assets/styles/iconfont.css'

使用iconfont
从iconfont官网的已添加的项目中复制需要使用的字体图标的十六进制代码，放在Header组件中需要呈现的位置。

代码优化

主色调优化：
- 优化目的：一个项目中的主色调，在很多地方都会用到，会出现大量的重复使用现象，—可以把这个颜色单独的放到一个变量中，需要使用的饿地方直接引用就可以，当网站的主色调需要改变的时候，只要改变这个变量的值，全局的主色调都会变化，可维护性将会得到比较大的提升。
- 变量的创建：在styles目录下创建variables.styl文件，在该文件中设置网站主色调$bgColor = #00bcd4
- 主色调的使用：比如在Header.vue中使用，首先要在<style></style>标签中引入样式，即@import '../../../assets/styles/variables.styl'，然后在需要设置该颜色的地方使用：background: $bgColor。
路径优化：
- 优化目的：很多样式文件或者是组件文件的都需要使用styles目录下的内容，引用时路径中含有重复的部分，比如，在main.js中
```
import './assets/styles/reset.css'
import './assets/styles/border.css'
import './assets/styles/iconfont.css'
```
考虑前面的重复路径部分能不能用一个特殊符号表示，就像是@表示的是src目录一样(注意：要想在css样式中引用其他的css样式使用@时要在前面添加~符号，即@import '~@/assets/styles/variables.styl')。
- 优化方法：在build目录下的webpack.base.conf.js文件中设置重复路径对应的特殊符号， reslove中有一个叫alias的别名项，里面默认存在一个指向，即：'@': reslove('src), 所以，我们自定义一个别名：'styles': reslove('src/assets/styles)，所以，原来重复的位置都可以替换成styles来表示，即
  main.js中
```
    import 'styles/reset.css'import 'styles/border.css'import 'styles/iconfont.css'
```
  Header.vue中
```
    <style>@import '~styles/variables.styl'</style>
```

去哪儿-02-HeaderDev相关推荐

JVM【带着问题去学习 02】数据结构栈+本地方法栈+虚拟机栈+JVM栈运行原理
1.数据结构栈栈是一种比较简单的数据结构,后进先出.栈本身是一个线性表,但是这个表中只有一端允许数据的进出.栈的常用操作包括入栈push和出栈pop,对应于数据的压入和弹出.由于栈后进先出的特性,常 ...
2019最新升级全能版vbox硬件级虚拟机系统 vm去虚拟化修改信息工具批量启动克隆 virtualbox CPA网赚挂机电商
联系Q~Q:131-119-0882 做亚马逊的用户推荐使用高级版Linux硬件级虚拟机量身定制版功能更强大,工作效率和防关联系数更高详情看如下宝贝连接: https://item.taobao ...
不能转正的开发实习，要不要去？
扫码加入大厂内推交流群 01 大厂实习机会正在压缩很多实习生在找了一圈大厂和小公司的实习机会后就会发现,很多大厂根本没有转正机会,而且是明确告诉你没有的. 尽管这样,每年还是有很多人上赶着去面试,因 ...
计算机音乐带你去旅行,带你去旅行
[ti:带你去旅行] [ar:校长] [al:带你去旅行] [by:] [offset:0] [00:00.09]带你去旅行 - 校长 [00:00.89]词:朱贺 [00:01.04]曲:朱贺 [0 ...
Elasticsearch 的前世今生【转】
原文地址:http://www.sohu.com/a/324768840_100299155 01 需求的诞生刘备一大早就来到了公司,一看张飞和关羽已经在公司了,就问道:"两位贤弟,今天来 ...
html5模仿手机音乐播放器(添加音乐进度条和时长)
今天用html+js+cs写了一个类似手机音乐播放器的小东东,代码规范性不是很好,高手切勿喷,新手可以看看,其中歌词同步js代码参考了一个老师的代码.自己添加的是点击按钮页面滑动,和上一曲下一曲播放, ...
泪目了！原河南常务副省长的艰辛求学路竟然这么感人
北大清华讲座我注意到:即使有人声称一切都是命中注定的,我们无法改变它,但是他们在过马路之前都会先看看周围.--[英]霍金转自:灼见(ID:penetratingview) 王明义,男,汉族,本科学 ...
2020年6月TIOBE编程语言排名公布
原文:2020年6月TIOBE编程语言排名公布 2020年6月TIOBE指数 6月头条:Rust 首次进入TIOBE指数前20名编程语言 Rust 诞生近 10 年后首次进入 TIOBE 指数前 2 ...
html5简介及常用标签
HTML介绍 Web服务本质 # python自制服务器socket通信端import socketsk = socket.socket() sk.bind(("127.0.0.1" ...
2022-忙碌的一年
(点击即可听音频) 前言花有重开日,人无再少年.每当这个时候,回头驻足,不是感慨万千,就是惜时如金,一年悄无声息的从指尖划过,星海横流,岁月如碑.那些被偷走的时光,发生了大大小小的事无论是平淡无奇 ...

去哪儿-02-HeaderDev

页面组件化

使用css辅助开发工具stylus进行Header组件开发

iconfont的使用

代码优化

去哪儿-02-HeaderDev相关推荐

最新文章

热门文章