Vue开发实例(五)修改项目入口页面布局

本文主要是介绍Vue开发实例(五)修改项目入口页面布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

修改项目入口

  • 一、创建新入口
  • 二、分析代码,修改入口
  • 三、搭建项目主页面布局
    • 1、Container 布局容器介绍
    • 2、创建布局
    • 3、布局器铺满屏幕
    • 4、创建Header页面
    • 5、加入Aside、Main和Footer模块

一、创建新入口

创建新的入口,取消原来的HelloWorld入口
在这里插入图片描述
参考代码如下:

<template><div><h1>{{ msg }}</h1></div>
</template>
<script>
export default {name: "Index",props: {msg: String,},
};
</script>
<style scoped>
</style>

二、分析代码,修改入口

查看main.js 我们可以看到,项目是通过App.vue来加载的
在这里插入图片描述
分析App.vue代码
在这里插入图片描述
这里3个地方加载并使用HelloWorld页面,此时我们来改成自己的Index.vue,修改这3个地方

图片也可以换成自己的,建议放在assets目录下
在这里插入图片描述

三、搭建项目主页面布局

上面修改完成自己的项目入口之后,接下来搭建项目主页面头部、导航、主体等页面布局

因为很多项目都是类似管理系统的界面,最上面是头部、左边是导航菜单、右边是主体页面、下方是Footer的框架结构,所以我们也按照这个方式来搭建。

1、Container 布局容器介绍

用于布局的容器组件,方便快速搭建页面的基本结构:

组件名描述
<el-container>外层容器。当子元素中包含 <el-header><el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。
<el-header>顶栏容器
<el-aside>侧边栏容器
<el-main>主要区域容器
<el-footer>底栏容器

以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外, 的子元素只能是后四者,后四者的父元素也只能是 。

2、创建布局

修改Index.vue的代码

<template><div  class="container"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container><el-footer>Footer</el-footer></el-container></div>
</template><script>
export default {name: "Index",props: {msg: String,},
};
</script>
<style>
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;line-height: 200px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;
}body > .el-container {margin-bottom: 40px;
}.container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
</style>

查看页面效果:
在这里插入图片描述

问题:布局器没有铺满

3、布局器铺满屏幕

  1. 创建全局css文件
    在src/assets/css创建global.css 文件,代码如下:
*{margin:0;padding:0;box-sizing: border-box;/* 全局设置100%,可能后面会有坑,其他的组件巨长,在变形的标签设置height:auto;可解决 */height: 100%;
}

这里主要是用到了:height: 100%;
其他的是为了把其他空格占位去除,为后面做准备。

  1. 在main.js 中注册此全局的css文件
import '@/assets/css/global.css';
  1. 这一步可做可不做,我是根据自己的电脑屏幕设置的15.6的,注释App.vue中style的margin-top,要不然屏幕超出高度
    在这里插入图片描述

4、创建Header页面

  1. 新建一个Header/index.vue,采用flex布局,讲头部分成左、中、右3个部分。
<template><div style="display:flex;"><div style="width: 200px;">头部</div><div style="flex:1"></div><div style="width: 100px;">欢迎</div></div>
</template><script>export default {name: "Header"}
</script><style scoped>
</style>
  1. 修改Index.vue
  • 使用 import Header from "./Header/index.vue";
  • export中加入 components: {Header}
  • templateel-header中使用 Header 组件

在这里插入图片描述
运行结果
在这里插入图片描述
接下来实现一下头部的具体代码,头部就实现3个东西:

  • 加入”欢迎来到Vue2项目”的字样
  • 编写用户头像显示代码
    • 可以指定图片路径为远程的,比如我指定一个图片网址。
  • 点击用户头像出现下拉(个人中心、退出登录…)
    • 用户头像点击一般都是选择个人中心、退出登录这些的,这个功能需要用到el-dropdown

在这里插入图片描述

代码实现:

具体的宽高值,根据自己的电脑分辨率进行代码实现,我的mac和windows的值就不一样。

<template><header><div><h1 class="hd_title">欢迎来到Vue2项目</h1></div><div class="opt-wrapper"><el-dropdown :hide-on-click="false"><div class="demo-basic--circle"><div class="block"><el-avatar :size="40" :src="avatar" :class="['avatar-info']"></el-avatar></div></div><el-dropdown-menu slot="dropdown" class="personinfo"><el-dropdown-item><i class="el-icon-info"></i>个人中心</el-dropdown-item><el-dropdown-item><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></div></header>
</template><script>
export default {name: "Header",data() {return {// 使用静态资源图片//avatar: require('@/assets/images/logo.png')// 使用网络图片avatar:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",};},
};
</script><style scoped>
header {display: flex;align-items: center;justify-content: space-between;color: #fff;
}
.hd_title {color: #425049;font-size: 30px;
}
/*设定头像图片样式*/
.avatar-info {margin-top: 10px;margin-right: 40px;cursor: pointer;
}
.personinfo {height: auto;margin-top: 0px;margin-left: -20px;
}
</style>

在这里插入图片描述

5、加入Aside、Main和Footer模块

上面的代码中只写了头部Header,接下来加入Aside、Main和Footer。
分别创建文件夹,然后创建index.vue
在这里插入图片描述
最后分别加入下列代码,只需要对应的name: "Main",换成Aside,Footer即可,不要让几个一样

<template><div>main div</div>
</template><script>export default {name: "Main"}
</script><style scoped></style>

修改components/Index.vue中的几个内容,全部如下代码:
在这里插入图片描述

<template><div class="container"><el-container><el-header><Header /></el-header><el-container><el-aside width="200px"><Aside /></el-aside><el-main><Main /></el-main></el-container><el-footer><Footer /></el-footer></el-container></div>
</template><script>
import Header from "./Header/index.vue";
import Aside from "./Aside/index.vue";
import Footer from "./Footer/index.vue";
import Main from "./Main/index.vue";export default {name: "Index",components: { Header, Aside, Footer, Main },props: {msg: String,},
};
</script>
<style>
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;line-height: 200px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;
}body > .el-container {margin-bottom: 40px;
}.container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
</style>

效果如图
在这里插入图片描述

这篇关于Vue开发实例(五)修改项目入口页面布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/767001

相关文章

ConvE 模型实例

问题代码 # 创建 ConvE 模型实例args = {"entity_dim": 200,"relation_dim": 200,"time_dim": 200,"emb_2D_d1": 10,"emb_2D_d2": 20,"num_out_channels": 32,"kernel_size": 3,"hidden_dropout_rate": 0.3,"feat_dropout_rat

Springboot项目打包Docker镜像并设置启动参数

ENTRYPOINT设置运行时参数 FROM java:8 MAINTAINER zgy<zgy@123.com>WORKDIR /usr/local/appCOPY *.jar app.jarEXPOSE 8080 ENTRYPOINT ["java", "-Dspring.profiles.active=${SPRING_PROFILES_ACTIVE}", "-jar", "app.j

ant-vue-desgin + nginx(项目站点) +nginx(门户站点)

1、主站点方向代理test指向项目服务器 主站点反向代理配置 server {listen 80;server_name www.main.com;#charset koi8-r;#access_log logs/host.access.log main; index index.html;root ./html; #反向代理test指向项目服务器location /tes

vue + nginx 反向代理配置方法二

1、vue.config.js 设置publicPath路径为反向代理路径: publicPath: ‘/test/’, module.exports = {/*Vue-cli3:Crashed when using Webpack `import()` #2463https://github.com/vuejs/vue-cli/issues/2463*/// 如果你不需要生产环境的 sour

vue+element作用域插槽

作用域插槽的样式由父组件决定,内容却由子组件控制。 在el-table使用作用域插槽 <el-table><el-table-column slot-scope=" { row, column, $index }"></el-table-column></el-table> 在el-tree使用作用域插槽 <el-tree><span class="custom-tree-node" s

基于springboot实现人口老龄化社区服务与管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现人口老龄化社区服务与管理系统演示 摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了人口老龄化社区服务与管理平台的开发全过程。通过分析人口老龄化社区服务与管理平台方面的不足,创建了一个计算机管理人口老龄化社区服务与管理平台的方案。文章介绍了人口老龄化社区服务与管理平台的系统分析部分,包括可行性分析等,系统设计部

大模型开发轻松入门——(1)从搭建自己的环境开始

pip install openai import openaiimport osfrom dotenv import load_dotenv, find_dotenv_ = load_dotenv(find_dotenv())openai.api_key = os.getenv('OPENAI_API_KEY')

开发了一个在线客服系统

开发了一个在线客服系统 作为程序员,我一直在寻找能够提高工作效率和用户体验的方法。最近,我成功开发了一个在线客服系统,这个系统旨在帮助企业更高效地管理客户咨询和服务流程。 技术栈 我选择了以下的技术栈来构建这个系统: Golang 作为后端服务的主要编程语言,它以其并发处理能力和高效的内存管理而闻名。 MySQL 作为数据库,用于存储用户信息、会话记录以及其他必要的数据。 Vue2 作为

世界上最好的开发语言还是PHP吗?

PHP做为一种轻量级开发语言,从2004年到现在都饱受争议,但是PHP的定位其实一直都算是比较清晰,主要支撑于中小企业的Web应用方面,到现在为止,互联网上应用最高的应用WordPress也是PHP语言所开发的。PHP的很多开发框架的使用量也居高不下,比如Laravel等等。PHP的开发依然广泛运用于建站,游戏服务端开发等等 昨晚和朋友聚餐喝酒,桌上一位老伙伴跟我吐槽,说PHP现在找工作越来越难

快速构建项目神器-Docker

篇提到了中小企业快速构建云上服务,本篇继续以开发的视角介绍一个容器化工具:Docker,以下部分摘自百度百科!本文算是一篇技术科普文,对实操上没有太大价值,但是可以告诉你Docker能用在什么地方,怎么使用。 序:上篇提到了中小企业快速构建云上服务,本篇继续以开发的视角介绍一个容器化工具:Docker,以下部分摘自百度百科!本文算是一篇技术科普文,对实操上没有太大价值,但是可以告诉你Docker