<h1> 全栈的自我涵养: 为咱们的我的项目增加首页 </h1>

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

每个人都是无可替代的，失去了便是失去了。

前言

上篇文章应用 vue ui 创立了我的项目 kola, 开源代码如下：

• github: https://github.com/zhangyunan…
• gitee: https://gitee.com/zhangyunan1…

在这片文章中，咱们持续开始，先增加个我的项目的首页以及登录页面，临时不与后端交互

实现后效果图

公共首页

作为一个偏后端治理我的项目，其实做不做公共首页都是能够的，毕竟有个 登录 以及登录后的 后盾性能 页就能够了，这里做个 公共首页 次要为了介绍下我的项目

个别首页做的都比拟高大上，但后盾管理系统格调个别都比较简单

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/zhangyunan…
• gitee: https://gitee.com/zhangyunan1…

参考

• element 容器: https://element.eleme.cn/#/zh…