vue 启动页配置_原来写个Vue 首页就这么简单

我就是我 2023-01-01 15:53 133阅读 0赞

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

> 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

在这篇文章中，我们继续开始，先添加个项目的首页以及登录页面，暂时不与后端交互

**完成后效果图**

![ad911fe80cad9ab25b5f043ff685df39.png][]

在这里插入图片描述

# **公共首页** #

作为一个偏后端管理项目，其实做不做公共首页都是可以的，毕竟有个 登录 以及登录后的 后台功能 页就可以了，这里做个公共首页 主要为了介绍下项目

一般首页做的都比较高大上，但后台管理系统风格一般都比较简单

1.  上下结构 在这里插入图片描述 Header 一般放项目或者企业logo, 常见的还会有 首页、功能、关于 等常见操作， Main 会加一些高大上的宣传图片、文案、数据呀
2.  上中下结构 在这里插入图片描述 Header 一般放项目或者企业logo, 常见的还会有 首页、功能、关于 等常见操作， Main 会加一些高大上的宣传图片、文案、数据呀 Footer 会写一些版权信息呀、服务条款、公司地址、还有一些便捷操作的网站地图
3.  其他 剩下的就是各种花里胡哨的首页了

作为一个偏后端的管理项目，我们就是用第二种方案吧！

> 关于首页可以找专门的前端小姐姐和小哥哥来设计一下，也可以直接去那种前端模板之家类似网站找个模板，修改一下

# **公共首页实现** #

因为是用 element ui, 在其提供的容器布局中，已经提供了对应的解决方案，其中第二种为

Header  Main  Footer

# **0. 先启动我们的项目** #

运行下 yarn serve, 这样在修改的时候就可以保持热部署了，我们可以实时的看到修改结果，启动后会提示地址，直接在浏览器打开就能看到 Vue 默认配置的首页了

# **1. 修改title** #

修改文件 public/index.html

在这里我们将首页 title 和 样式进行修改，同时删除

毕竟自己用，很容易搞定浏览器兼容的

并在该文件中加入 body,html\{ height:100%;margin: 0;\} 样式

# **2. 修改首页** #

修改文件 src/App.vue

直接将原内容改为

# **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 也删除

加入布局组件

`                                        `

`Kola`

`                                登录                      这里放一些高大上的描述和图片吧      © 2020 双鬼带单      `

``

# **git** #

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

# **参考** #

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

[ad911fe80cad9ab25b5f043ff685df39.png]: /images/20221120/9c80bb7fc7f745d7a4e2346a7ca25ec3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 启动页配置_原来写个Vue 首页就这么简单

全栈的自我修养: 为我们的项目添加首页 > You can never replace anyone. What is lost is lost.每个人都是无可替代的，失

我就是我/ 2023年01月01日 15:53/ 0 赞/ 134 阅读

相关 Vue 首页秒开实践指南

一前端性能优化一直是衡量一个团队和一个前端的各方面水平，呈现快速的加载，是给人最直观，成就感也最足的一个感受，而且对用户体验是第一重要的概念，所以这个相当重要，现就来结合美

约定不等于承诺〃/ 2022年12月28日 08:29/ 0 赞/ 160 阅读

相关 vue之面包屑首页/列表页 /列表详情页

vue之面包屑首页/列表页 /列表详情页座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人 -------------------- 文章目

Bertha 。/ 2022年12月26日 08:21/ 0 赞/ 230 阅读

相关 vue 简单分页

vue 简单分页样式： .page-bar { -webkit-touch-callout: none; -web

谁借莪１个温暖的怀抱￠/ 2022年05月24日 08:00/ 0 赞/ 320 阅读

相关 Vue实战项目开发--首页开发

首页开发注意：项目的图片资源都是去哪儿网站的在线图片([图片来源网站][Link 1]),只可以用来练习哦，小心侵权 1. 首页header区域开发

左手的ㄟ右手/ 2022年05月12日 16:08/ 0 赞/ 318 阅读

相关 vue首页页面呈现

main.js是加载路由的文件第一步新建一个views页面,定义一个GoodsList.vue组件,在template里写入代码,然后在script里引入import引

太过爱你忘了你带给我的痛/ 2022年05月08日 20:25/ 0 赞/ 326 阅读

相关 vue首页加载优化

vue 首页加载过慢优化方案 1.异步路由加载，如下形式 \{ path: '/', name:

àì夳堔傛蜴生んèń/ 2022年01月23日 23:13/ 0 赞/ 370 阅读

相关策略模式原来就这么简单！

前言 > 只有光头才能变强回顾前面： [给女朋友讲解什么是代理模式][Link 1] [包装模式就是这么简单啦][Link 2] [单例模式你会几

淩亂°似流年/ 2021年09月30日 17:28/ 0 赞/ 431 阅读

相关 vue结合bootstrap搭建首页

目录一点睛 1 Bootstrap官网 2 基本模板二页面设计三代码四效果 -------------------- 一点睛 1 Bo

迈不过友情╰/ 2021年07月25日 02:57/ 0 赞/ 392 阅读

相关 vue引入首页轮播图

参考学习网址： [http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-caption

川长思鸟来/ 2021年06月24日 16:11/ 0 赞/ 528 阅读