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

全棧的自我修養: 為我們的項目添加首頁

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

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

前言

上篇文章使用 vue ui 創建了項目 kola, 開源代碼如下：

• github: https://github.com/zhangyunan1994/kola
• gitee: https://gitee.com/zhangyunan1994/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

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

參考

• element 容器: https://element.eleme.cn/#/zh-CN/component/container