日志

原来写个Vue 首页就这么简单

 来源    2020-08-02    1  

全栈的自我修养: 为我们的项目添加首页

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

参考

相关文章
javascript – vue.js无效的简单html
问答vue.js的初学者,我跟着这个链接: https://www.sitepoint.com/getting-started-with-vue-js/ 几乎将代码复制到我的html中.但是它只是不工作. ...
2
为什么我的C盘写测试比使用bash的简单文件拷贝慢得多?
问答使用下面的程序,我尝试测试使用std :: ofstream可以写入磁盘的速度. 当写入1 GiB文件时,我实现了大约300 MiB / s. 但是,使用cp命令的简单文件复制速度至少是两倍. 我的程 ...
Go组件学习——手写连接池并没有那么简单
日志1.背景 前段时间在看gorm,发现gorm是复用database/sql的连接池. 于是翻了下database/sql的数据库连接池的代码实现,看完代码,好像也不是很复杂,但是总觉得理解不够深刻,于 ...
2
写你的shell,其实很简单[架构篇]
日志引语:我本人以前并没有写过shell脚本,也许是因为懒,也许是没有被逼到要去写shell的地步.但是,前段时间,工作需求,要求重新跑几个月的脚本,这些脚本是每天定时进行跑的,而且每天是好几个脚本一起关 ...
1
VUE+Element UI实现简单的表格行内编辑效果
日志原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...
2
你用过不写代码就能完成一个简单模块的组件么?
日志开篇四连问 你是否懒得写普通的增删改查方法? 你是否不喜欢代码生成插件的重复代码? 你是否渴望一个没有冗余代码的项目? 你是否渴望一行代码都不用写就能完成一个简单的模块? 组件由来 作为后端程序员,相 ...
1
vue中axios的简单使用
日志我们一般在用jq的时候会使用到ajax来进行与服务器之间的交流,vue中也提供了相应的类似于ajax的方法-axios来进行与服务器之间的数据传递 现在的这篇是最简单的使用,后续会添加上来复杂的使用 ...
VUE图片懒加载-vue lazyload插件的简单使用
日志一. vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue- ...
从Nodejs脚本到vue首页看开源始末的DemoHouse
日志最近上Github看见了大漠的DemoHouse项目,看到Issues说准备做一个首页,于是我的第一想法就是做一个md列表页面,md文件可以很容易的生成一个html文件.刚刚做好脚本文件,可以生成li ...
1
分享一个自己写的vue多语言插件smart-vue-i18n
日志前言 目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压 ...
vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
日志1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
1
vue.js 2.0实现的简单分页
日志<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
1
Vue中watch的简单应用
日志Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动. 如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项. 下面写两个demo,参考demo ...
1
vue基于组件实现简单的todolist
日志把todolist拆分为header.footer.list三个模块 index文件 <!DOCTYPE html> <html lang="en"> &l ...
1
写一个Vue loading 插件
日志作者:imgss 出处:http://www.cnblogs.com/imgss 欢迎转载,也请保留这段声明.谢谢! 什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue ...
1
vue.js最最最最简单实例
日志vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...
1
jQuery与vue分别实现超级简单的绿色拖动验证码功能
日志jquery的绿色拖动验证功能 在网上看到了一个这样的问题:那种像拖动滑块匹配图形的验证方式是怎么实现的?. 突然想到实现一个简单绿色拖动验证码的功能,在网上搜了下,有一个用jquery实现的该功能代 ...
写一个vue的滚动条插件
日志组件源码如下: vue-scroll.vue <template> <div class="vue-scroll" ref="vueScrollW&qu ...
1
如何优雅的写一个Vue 的弹框
日志写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...
1
Vue(二)简单入门
日志根据上一节搭建的hello-world工程(包含Router),用Webstorm打开,我们先运行一下工程. 界面如下 .. 我将在About里面介绍一下Vue的相关内容. 打开About.vue,修 ...
1