[day16]Vue实作-建立首页

现在的进度很紧绷，就尽量写出我实际的开发流程。
基本上这次的铁人就是将示范教学实作，并调整为自己想要的网站。
就边看边做~
同参考的示范教学，建置好首页，再进行调整。这部分很简单，就照贴就好了，没什麽技术性。
以下是调整後的内容，框架的部分基本上都会跟范例很接近，最後会再一次微调网页文字呈现及内容。

首页建立(Home.vue)

规划

期望区分三个区块，并於三个区块内，提供连线至各分页。

• 费用缴纳
  • 收缴方式
  • 收缴页面
• 社区最新消息
  • 公告
• 社区相关资讯
  • 社区介绍及联络方式

而网页中呈现的照片来源是从 https://www.freepik.com/ 搜寻适合网站放置的照片，并乖乖的网页最下方，放置该网页的连结。
首页成果如下，是不是很漂亮呢 !!

程序

• Home.vue
  加入导入三大区块的部分。

<template>
  <div class="home">
    <Navbar></Navbar>
    <Header></Header>
    <Banner></Banner>
    <Footer></Footer>
  </div>
</template>
<script>

import Header from '@/components/Header.vue'; 
import Banner from '@/components/Banner.vue'; 
import Footer from '@/components/Footer.vue'; 
 
export default {
  name: "Home",
  components: {
    Header, Banner, Footer
  }
};

</script>

• 图片
  专案路径下(.\public\img\layout)，准备三个区块的图片header.jpg、banner.jpg、footer.jpg

• 三大区块建置
  Header.vue、Banner.vue及Footer.vue程序码如下

  • Header.vue

  <template>
      <div class="header">
          <div class="container h-100">
            <div class="row h-100 justify-content-center align-items-center">
         <!--header画面左区-->
              <div class="col-sm-12 col-md-6">
                <div class="header-content">
                  <h1 class="header-title">
                    费用收缴
                  </h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                  <div class="header-btn mt-3">
                      <button @click="goabout" class="btn custom-btn btn-info mr-4">
                          About
                      </button>
                      <button @click="goproducts" class="btn custom-btn btn-outline-secondary">
                        Products
                      </button>
                  </div>
                </div>
              </div>
         <!--header画面右区-->
              <div class="col-sm-12 col-md-5 m-3">
                  <div class="graphic">
                      <img src="/img/layout/coin-wooden-table.jpg" alt="" width="400">
                  </div>
              </div>
            </div>
          </div>
      </div>
  </template>
  
  <script>
  export default {
    name: "Header",
    props: {
      msg: String
    },
    methods:{
      goabout(){
        this.$router.replace('about');
      },
      goproducts(){
        this.$router.replace('products');
      },
    }
  };
  </script>
  
  <style >
    .header{
      padding-top: 7rem;
      width: 100%;
      min-height: 500px;
      text-align: left;
      background-color:darkgoldenrod;
    }
  </style>
  

  • Banner.vue

    <template>
        <div class="banner">
            <div class="container h-100">
                <div class="row p-6 h-100 justify-content-center align-items-center">
                <!--banner画面左区-->
                <div class="col-sm-12 col-md-5">
                    <img src="/img/layout/link.jpg" alt="" width="300">
                </div>
                <!--banner画面右区-->
                <div class="col-sm-12 col-md-5 m-3">
                    <h3>Latest News</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <button @click="gonews" class="btn custom-btn btn-outline-primary mr-4">
                      More News
                    </button>
    
                </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
      name: "Banner",
      props: {
        msg: String
      },
      methods:{
        gonews(){
          this.$router.replace('news');
        },
      }
    };
    </script>
    
    <style >
      .banner{
        padding-top: 7rem;
        width: 100%;
        min-height: 500px;
        text-align: left;
        background-color: burlywood;
      }
    </style>
    

  • Footer.vue

  <template>
      <div class="footer">
          <div class="container h-100">
              <div class="row p-5 h-100 justify-content-center align-items-center">
              <!--footer画面左区-->
              <div class="col-sm-12 col-md-7">
                  <h3>Find Us</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                  <button @click="gostores" class="btn custom-btn btn-outline-primary mr-4">
                    Stores Information
                  </button>
              </div>
              <!--footer画面右区-->
              <div class="col-sm-12 col-md-4 m-3">
                  <img src="/img/layout/webpic.jpg" alt="" width="300">
              </div>
              </div>
          </div>
          <a href="https://www.freepik.com/photos/">Technology photo created by jcomp - www.freepik.com</a>
      </div>
  </template>
  
  <script>
  export default {
    name: "Footer",
    props: {
      msg: String
    },
    methods:{
      gostores(){
        this.$router.replace('stores');
      },
    }
  };
  </script>
  
  <style >
    .footer{
      padding-top: 7rem;
      width: 100%;
      min-height: 500px;
      text-align: left;
      color: #ffffff;
      background-color:darkslategray;
    }
  </style>
  

说真的，如果熟悉VUe和bootstrapvue，要建置出想要的框架，就容易多罗，多练习才行罗~
工作比较忙碌，所以进度很慢，keep going!!!