技術標籤：前端開發

專案總部落格見《Vue前端專案實戰–網上商城–總結篇（coderwhy老師的商城專案）》https://blog.csdn.net/Jelly_11/article/details/113851138

這篇部落格是記錄專案中的首頁開發過程。

一、頂部導航欄navbar的封裝

實現效果：

在components/common/navbar資料夾中新建NavBar.vue檔案，設定三個插槽，用於使用者設定導航欄左中右三塊內容。首頁中只需要用到中間這個插槽，在Home.vue中引用NavBar.vue。

詳細程式碼：

1. NavBar.vue

<template>
  <
 
div class='nav-bar' :style='{backgroundColor: navColor}'>
    <div class='left'><slot name='left'></slot></div>
    <div class='center'><slot name='center'></slot></div>
    <div class='right'><slot name='right'></slot></div>
  <
 
/div>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    navColor: {
      type: String,
      default: 'var(--color-tint)'
    } 
  },
}
</script>

<style scoped>
  .nav-bar {
    display: flex;
    /*垂直居中*/
    height: 44px;
    line-height: 44px;
    /*水平居中*/
 

    text-align: center;    
  }
  .left, .right {
    width: 60px;
  }
  .center {
    flex: 1;
  }
</style>

2. Home.vue

<template>
  <div id='home'>
    <!-- 頂部導航欄 -->
    <nav-bar navColor='var(--color-tint)' class='home-nav'>
      <div slot='center'>購物街</div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar"

export default {
  name: 'Home',
  components: {
    NavBar
  }
}
</script>

<style scoped>
  .home-nav {
    color: #fff;
    position: fixed;
    /*否則center寬度不撐滿整個螢幕*/
    left: 0;
    right: 0;
    top: 0;
  }
</style>

首頁正在開發，部落格持續更新中……

接下來內容：

• 首頁開發：navbar的開發
• 首頁開發：網路資料請求
• 首頁開發：輪播圖
• 首頁開發：推薦資訊