全局安装stylus和stylus-loader

在Vue中有三种CSS预处理，现在用的最多的是stylus。

下载安装stylus、stylus-loader包。

npm install stylus@0.54.5  --save
npm install stylus-loader@3.0.1 --save

在package.json中就可以stylus和stylus-loader 对应的版本号。

在vscode的编写stylus，最好安装stylues的插件

创建iconfont项目

在阿里巴巴图标官方，创建iconfont项目，并添加所需的图标。下载到本地。

将对应的文件复制到对应的项目，并修改iconfont.css文件对应的路径。

Home.vue

在Home.vue引用HomeHeader ，HomeHeader 对应的<home-header>

<template>
  <div>
    <home-header></home-header>
  </div>
</template>

<script>
// 局部组件需要插入到components中，由于键和值都是一样，所以写成HomeHeader
import HomeHeader from './components/Header'
export default {
   
  name: 'Home',
  components: {
   
    HomeHeader
  }
}
</script>

<style>
</style>

Header.vue

Header.vue就是首页开发的组件，将对应的图标引用。

在styles中1rem等于100px。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

对于需要适配各种移动设备，使用rem，因此前端开发基本用rem。

<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe602;</span>
      输入城市/景点/游玩主题
    </div>
    <div class="header-right">城市
      <span class="iconfont arrow-icon">&#xe658;</span>
    </div>
  </div>
</template>

<script>
export default {
   
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header
  display: flex
  line-height: 0.86rem
  height: 0.86rem
  background: $bgColor
  color: #fff
  .header-left
    width: 0.64rem
    float: left
    .back-icon
      text-align: center
      font-style: 0.4rem
  .header-input
    flex: 1
    background: #fff
    height: 0.64rem
    line-height: 0.64rem
    margin-top: 0.12rem
    margin-left: 0.2rem
    boirder-radius: 0.1rem
    color: #ccc
  .header-right
    width: 1.24rem
    float: right
    text-align: center
    .arrow-icon
      margin-left: -0.04rem
      font-size: 0.24rem
</style>