Vue去哪儿项目首页开发&首页header区域

首页header区域

  1. 安装开发依赖包(项目目录下)
    stylus：CSS的预处理框架，即将stylus转换为css使用
    stylus-loader：让webpack理解stylus
    1
    2
    npm  install  stylus --save
    npm  install  stylus-loader  --save

参考使用文章：
『前端干货篇』：你不知道的Stylus
张鑫旭大大的Stylus文章

使用过程中报错：npm run dev后报错
Vue中使用Stylus报错：Module build failed: TypeError: this.getOptions is not a function

报错原因
stylus-loader版本过高，更改为stylus-loader@3.0.1即可

再次安装stylus

1
2
npm uninstall stylus stylus-loader //删除之前的loader
npm install stylus stylus-loader@3.0.1 --save-dev //再次安装
  1. src\pages\home\components路径下新建一个Header.vue

页面组件化，对于Home这个页面可以被拆分成多个小组件，Header.vue可以放在compons中被使用

  1. 引入组件使用

使用组件

  1. Header.vue页面样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
  <div class="header">
    <div class="header-left">返回</div>
    <div class="header-input">输入城市/景点/游玩/主题</div>
    <div class="header-right">城市</div>
  </div>
</template>

<script>
export default {
  name: "HomeHeader"
};
</script>

<style lang="stylus" scoped>
.header
  display:flex
  line-height: .86rem
  background #00bcd4
  color: #fff
  .header-left
    width .64rem
    float:left
  .header-input
     flex:1
     line-height:.64rem
     height: .64rem
     margin-top .12rem
     margin-left: .2rem
     background: #fff
     border-radius: .1rem
     color:#ccc
  .header-right
     width: 1.24rem
     float:right
     text-align:center
</style>

补充：<style lang="stylus" scoped>
我们写的这个组件不要对其他组件产生影响，使用scoped可以限制.header的样式只对当前组件有效，不对其他组件有影响
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

完成效果：

使用组件

iconfont的使用和代码优化

iconfont下载使用

  1. 将以下文件放入项目静态资源中,这里我们修改一下引用路径

资源引入

  1. 引入iconfont

由于我们几乎所有页面都要使用iconfont，所以我们可以在main.js中引用

1
import 'styles/iconfont.css'
  1. 使用，这里的代码是Unicode编码
1
2
3
<div class="iconfont back-icon">&#xe624;</div>
<span class="iconfont">&#xe632;</span>
<span class="iconfont  arrow-cron">&#xe64a;</span>

css样式(省略)

  1. 代码优化

整个Header背景色都是一个绿色的内容，我们这个网页很多地方都会用到这个背景色，我们可以将这个颜色单独放在一个变量中，然后单独的去引用。未来网站颜色风格需要切换，只需要去改变这一个变量，全局都会改变，这个可维护性会有很大的提升

解决：

全局变量文件

全局变量文件

引入使用：

引入与使用

  1. 引入优化

起别名：

起别名

使用：

1
@import '~styles/varibles.styl';

这里我们修改了webpack中的配置项时，一定要重启项目，否者会报错