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

You can never replace anyone. What is lost is lost.每個人都是無可替代的，失去了便是失去了。

前言

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

github: https://github.com/zhangyunan1994/kolagitee: https://gitee.com/zhangyunan1994/kola

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

完成後效果圖

在這裡插入圖片描述

公共首頁

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

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

上下結構 在這裡插入圖片描述 Header 一般放專案或者企業logo, 常見的還會有 首頁、功能、關於 等常見操作， Main 會加一些高大上的宣傳圖片、文案、資料呀上中下結構 在這裡插入圖片描述 Header 一般放專案或者企業logo, 常見的還會有 首頁、功能、關於 等常見操作， Main 會加一些高大上的宣傳圖片、文案、資料呀 Footer 會寫一些版權資訊呀、服務條款、公司地址、還有一些便捷操作的網站地圖其他 剩下的就是各種花裡胡哨的首頁了

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

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

公共首頁實現

因為是用 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

並在該檔案中加入 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 檔案

第一步刪除其中 HelloWorld 的使用，同時一併刪除那個檔案，並把 img 也刪除

<template>  <div class="home">  </div></template><script>export default {  name: 'Home'}</script>

加入佈局元件