iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
1
自我挑戰組

前端史萊姆與Vue的三十天時光冒險系列 第 27

Day27 Vue CLI專案實作(一):新增路由路徑及首頁banner

  • 分享至 

  • xImage
  •  

本文同步發表於斜槓女紙部落格:Day27 Vue CLI專案實作(一):新增路由路徑及首頁banner

Day27 Vue CLI專案實作(一):新增路由路徑及首頁banner

嗨!延續昨天的進度,今天要來試著調整首頁畫面,將原有的首頁內容搬家搬過來。
直接來看看我的實作過程吧!

新增Banner元件

  1. 到components資料夾新增banner.vue檔案
  2. 增加<template>元件內容,並把原本專案中的架構搬過來並調整一下
    <template>
      <div id="section-banner" class="d-flex justify-content-center align-items-center" style="minHeight:100vh;">
          <div class="bg showIn"><img src="@/assets/images/bg_01.png" alt="">
          </div>
          <div class="title position-absolute">不 想 │ 上 班</div>
          <div class="logo position-absolute"><img src="@/assets/images/logo.svg" alt="">I don't want to work</div>
          <a class="scroll-btn animated infinite fadeOutDown" href="#section-rooms"><img
                  src="@/assets/images/slide_btn.svg" alt=""></a>
      </div>
    </template>
    
  3. BannerSetion命名
    export default {
      name: 'BannerSection',
    }
    

調整Home.vue

  1. 調整在views資料夾中的home.vue,先隱藏原本的程式碼,並新增<BannerSection/>標籤
    <template>
      <div id="main" class="container-fluid">
        <div class="row">
            <div class="col-12">
                <BannerSection/>
            </div>
        </div>
      </div>
    </template>
    
  2. <script>中引入剛剛新增的banner.vue,並調整export default的參數設定
    import BannerSection from '@/components/banner.vue';
    
    export default {
      name: 'banner',
      components: {
        BannerSection
      }
    }
    

引入CSS樣式

  1. 在public資料夾中的index.html引入Font AwesomeAnimate.css

    <!-- font-awesome -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">
      <!-- animate.css -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
    
  2. 將CSS樣式新增進入style.scss

首頁畫面

完成以上動作以後應該就能看到先前的畫面出現在首頁囉!
今天就先分享到這兒囉,明天我們再繼續~


上一篇
Day26 閒不下來的史萊姆(四):幫專案搬新家吧!
下一篇
Day28 Vue CLI專案實作(二):Axios串接API及房間列表畫面
系列文
前端史萊姆與Vue的三十天時光冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言