原來寫個Vue 首頁就這麼簡單

雙鬼帶單發表於2020-08-02
Vue

全棧的自我修養: 為我們的專案新增首頁

You can never replace anyone. What is lost is lost.

每個人都是無可替代的，失去了便是失去了。

前言

上篇文章使用 vue ui 建立了專案 kola, 開原始碼如下：

在這片文章中，我們繼續開始，先新增個專案的首頁以及登入頁面，暫時不與後端互動

完成後效果圖

在這裡插入圖片描述

公共首頁

作為一個偏後端管理專案，其實做不做公共首頁都是可以的，畢竟有個 登入 以及登入後的 後臺功能 頁就可以了，這裡做個公共首頁 主要為了介紹下專案

一般首頁做的都比較高大上，但後臺管理系統風格一般都比較簡單

  1. 上下結構

    在這裡插入圖片描述

    Header 一般放專案或者企業logo, 常見的還會有 首頁、功能、關於 等常見操作，

    Main 會加一些高大上的宣傳圖片、文案、資料呀

  2. 上中下結構

    在這裡插入圖片描述

    Header 一般放專案或者企業logo, 常見的還會有 首頁、功能、關於 等常見操作，

    Main 會加一些高大上的宣傳圖片、文案、資料呀

    Footer 會寫一些版權資訊呀、服務條款、公司地址、還有一些便捷操作的網站地圖

  3. 其他

    剩下的就是各種花裡胡哨的首頁了

作為一個偏後端的管理專案，我們就是用第二種方案吧！

關於首頁可以找專門的前端小姐姐和小哥哥來設計一下，也可以直接去那種前端模板之家類似網站找個模板，修改一下

公共首頁實現

因為是用 element ui, 在其提供的容器佈局中，已經提供了對應的解決方案，期中第二種為

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>

0. 先啟動我們的專案

執行下 yarn serve, 這樣在修改的時候就可以保持熱部署了，我們可以實時的看到修改結果，啟動後會提示地址，直接在瀏覽器開啟就能看到 Vue 預設配置的首頁了

1. 修改title

修改檔案 public/index.html

在這裡我們將首頁 title 和 樣式進行修改，同時刪除 <noscript> 畢竟自己用，很容易搞定瀏覽器相容的

並在該檔案中加入 body,html{ height:100%;margin: 0;} 樣式

2. 修改首頁

修改檔案 src/App.vue

直接將原內容改為

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<style>
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #F3F5F8;
  height: 100%;
  padding: 0;
}
</style>

3. 修改 Home 元件

在我們檢視路由配置的時候，可以看到

import Home from '../views/Home.vue'

const routes = [{
    path: '/',
    name: 'Home',
    component: Home
  }
]

其中 '/' 將匹配到 Home 元件, 又因為我們上面將 App.vue 中內容已經全部清理掉，則首頁展示的內容均來自 Home，這裡我們開始修改 src/views/Home.vue 檔案

  1. 第一步刪除其中 HelloWorld 的使用，同時一併刪除那個檔案，並把 img 也刪除
<template>
  <div class="home">
  </div>
</template>

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

加入佈局元件

<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="8">
            <div class='title'>Kola</div>
          </el-col>
          <el-col :span="16" style="text-align: right; padding-right: 30px;">
            <el-button plain size="medium">登入</el-button>
          </el-col>
      </el-row></el-header>
      <el-main>這裡放一些高大上的描述和圖片吧</el-main>
      <el-footer>&copy; 2020 雙鬼帶單</el-footer>
    </el-container>
  </div>
</template>

<style scope="this api replaced by slot-scope in 2.5.0+">
.home {
  height: 100%;
}

.title {
  background-color: #1ec198;
  width: 150px;
  padding-left: 30px;
}

.el-container {
  height: 100%;
}

.el-header {
  height: 60px;
  background-color: white;
  line-height: 60px;
  padding: 0!important;
}

.el-header > span,
.el-header .el-dropdown {
  font-size: 18px;
}

.el-footer {
  background-color: #252d36;
  color: #ffc852;
  text-align: center;
  line-height: 60px;
}

.el-main {
  color: #333;
  text-align: center;
}
</style>

git

參考

相關文章