25 Vue Home页面的以及HomeHeader页面的实现

** 依赖的安装

        npm install fastclick --save       安装   fastclick

        npm install stylus --save         安装  stylus 

        npm install stylus stylus-loader@3.0.0 --save-dev

一、 添加Home页面

使用 import  HomeHeader from './components/Header'   导入

<template>
  <div>
      <home-header>home-header>
  div>
template>
 
<script>
// 添加HomeHeader组件到Home页面中
import HomeHeader from './components/Header'
export default {
  name: 'Home',
  components: {
    HomeHeader
  }
}
script>
 
<style>
 
style>

二、添加组件页面HomeHeader页面

实现 HomeHeader 页面。加样式等

<template>
  <div>
      <div class="header">
        <div class="header-left">返回div>
        <div class="header-input">输入城市/景点/游玩主题div>
        <div class="header-right">城市div>
      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
    height: .64rem
    line-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>