前言

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

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

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

实现后效果图

公共首页

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

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

高低构造
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

在这里咱们将首页 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 文件

第一步删除其中 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...