VUE 笔记 ilovecoding 159 首页开发-FeatureView的封装

内容来自 B站 ilovecoding 《最全最新Vue、Vuejs教程，从入门到精通》

1. 在 views/home/childComps 目录下增加组件 FeatureView.vue

<template>
  <div class="feature">
    <a href="https://act.mogujie.com/zzlx67">
      <img src="~assets/img/home/recommend_bg.jpg" alt=""/>
    </a>
  </div>
</template>

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

<style scoped>
  .feature img {
    width: 100%;
  }
</style>

2. 在 assets\img\home 目录下放图片

3. Home.vue 中使用组件

<template>
  <div id="home">

    <nav-bar class="home-nav">
      <template v-slot:center>
        <div>购物街</div>
      </template>
    </nav-bar>

    <home-swiper :banners="banners"/>

    <recommend-view :recommends="recommends"/>

    <feature-view />

</template>

导入、注册

4. Home.vue 中固定导航

<style>
  #home {
    padding-top: 44px;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
</style>