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}
  • 在template的el-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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/425284.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

测试需求平台9-Table 组件应用产品列表优化

测试需求平台9-Table 组件应用产品列表优化

✍此系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版&#xff0c;拥抱Vue3.0将前端框架替换成字节最新开源的arco.design&#xff0c;其中约60%重构和20%新增内容&#xff0c;定位为从 0-1手把手实现简单的测试平台开发教程&#xff0c;内容将囊括基础、扩展和实战&a…
阅读更多...
文件操作和IO(2)：Java中操作文件

文件操作和IO(2)：Java中操作文件

目录 一、File的属性 二、File的构造方法 三、File的方法 四、代码示例 1、getName&#xff0c;getParent&#xff0c;getPath方法 2、getAbsolutePath&#xff0c;getCanonicalPath方法 3、exists&#xff0c;isDirectory&#xff0c;createNewFile方法 4、createNewF…
阅读更多...
【04】C语言括号匹配问题

【04】C语言括号匹配问题

欢迎来到土土的博客~&#x1f973;&#x1f973;&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;大耳朵土土垚的博客 &#x1f4a5; 所属专栏&#xff1a;C语言系列函数实现 题目描述&#xff1a; 给定一个只包括 ‘(’&#xff0c;‘)’&#xf…
阅读更多...
金融业被网络攻击了怎么办，如何治理和风险控制？

金融业被网络攻击了怎么办，如何治理和风险控制？

近年来&#xff0c;网络罪犯的人数和复杂程度都在增加&#xff0c;网络罪犯的目标锁定变得更具策略性&#xff0c;更加专注于最大效率和获利。随着有关全球网络犯罪的数据持续涌入&#xff0c;可以看出金融服务企业已然成为头号锁定目标。虽然金融服务企业在网络安全人员、工具…
阅读更多...
python 基础知识点（蓝桥杯python科目个人复习计划57）

python 基础知识点（蓝桥杯python科目个人复习计划57）

今日复习计划&#xff1a;做题 例题1&#xff1a;笨笨的机器人 问题描述&#xff1a; 肖恩有一个机器人&#xff0c;他能根据输入的指令移动相应的距离。但是这个机器人很笨&#xff0c;他永远分不清往左边还是往右边移动。肖恩也知道这一点&#xff0c;所以他设定这个机器人…
阅读更多...
实现数组方法 forEach map filter every

实现数组方法 forEach map filter every

手写forEach Array.prototype.myforEach function (fn, thisValue) {let index 0;let arr thisValue || this;if (typeof fn ! function) {throw new TypeError(fn is not a function)}while (index < arr.length) {if (index in arr) {fn.call (thisValue, arr[index],…
阅读更多...
AI入门笔记（三）

AI入门笔记（三）

神经网络是如何工作的 神经网络又是如何工作的呢&#xff1f;我们用一个例子来解释。我们看下面这张图片&#xff0c;我们要识别出这些图片都是0并不难&#xff0c;要怎么交给计算机&#xff0c;让计算机和我们得出同样的结果&#xff1f;难点就在于模式识别的答案不标准&…
阅读更多...
Mybatis_plus-逻辑删除、通用枚举、自动填充、插件等

Mybatis_plus-逻辑删除、通用枚举、自动填充、插件等

一、逻辑删除 曾经我们写的删除代码都是物理删除。 逻辑删除&#xff1a;删除转变为更新 ​ update user set deleted1 where id 1 and deleted0 查找: 追加 where 条件过滤掉已删除数据,如果使用 wrapper.entity 生成的 where 条件也会自动追加该字段 ​ 查找: select id,nam…
阅读更多...
【NR 定位】3GPP NR Positioning 5G定位标准解读（五）

【NR 定位】3GPP NR Positioning 5G定位标准解读（五）

前言 3GPP NR Positioning 5G定位标准&#xff1a;3GPP TS 38.305 V18 3GPP 标准网址&#xff1a;Directory Listing /ftp/ 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;一&#xff09;-CSDN博客 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;…
阅读更多...
扑克牌翻牌记忆小游戏源码

扑克牌翻牌记忆小游戏源码

源码由HTMLCSSJS组成&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 效果预览 下载地址 https://www.qqmu.com/2296.html
阅读更多...
Spring学习笔记（七）SpringMVC入门

Spring学习笔记（七）SpringMVC入门

一.什么是Spring MVC 1.什么是MVC&#xff08;一种思想模式&#xff09; M:模型 V:视图 C:控制器 2、Java EE三层架构 在Java EE开发中&#xff0c;系统经典的三层架构包括表现层、业务层和持久层。 表现层&#xff08;Web层&#xff09;负责接收客户端请求&#xff0c;并…
阅读更多...
Linux基本指令（下）

Linux基本指令（下）

目录 1. less指令 2. head与tail指令 3. find指令 示例 4. grep指令 示例 ​编辑 5. zip/unzip 打包与压缩 示例 ​编辑 6. tar指令 7. find指令&#xff1a; -name 8. echo指令 9. 时间相关的指令 1.在显示方面&#xff0c;使用者可以设定欲显示的格式&#xff…
阅读更多...
更详细的软件测试理论基础：流程，开发、测试模型，测试分类，测试用例及其设计方法，缺陷

更详细的软件测试理论基础：流程，开发、测试模型，测试分类，测试用例及其设计方法，缺陷

文章目录 一、测试流程二、开发模型1、 瀑布模型2、增量模型3、快速模型4、其他 三、测试模型1、V模型2、W模型 四、测试分类五、测试用例 test case六、测试用例设计方法1、等价类划分法2、边界值分析法3、因果图法4、判定表法5、正交法6、场景法7、流程分析法8、错误推测法方…
阅读更多...
OpenAI回击马斯克的起诉：GPT-4不是AGI，所以没必要开源

OpenAI回击马斯克的起诉：GPT-4不是AGI，所以没必要开源

前情提要 上一集我们讲到&#xff0c;马斯克起诉了OpenAI&#xff0c;扬言其背叛了公司成立时达成的一项协议&#xff0c;即开发技术的目的是“造福人类”而非利润。 “OpenAI已经变成了微软的一个闭源形态的实际子公司。在其新的董事会领导下&#xff0c;公司不仅在开发&…
阅读更多...
FreeCad 有限元分析入门

FreeCad 有限元分析入门

2024.3 最新版本 0.21.2 FreeCad 有限元分析入门 基本步骤&#xff1a; 一、零件制作 1、创建立方体 2、修改参数 二、建立力学分析 1、为零件附着材料 2、增加固定约束 3、增加均布在表面的受力 4、零件网格化 …
阅读更多...
Decoupled Knowledge Distillation解耦知识蒸馏

Decoupled Knowledge Distillation解耦知识蒸馏

Decoupled Knowledge Distillation解耦知识蒸馏 现有的蒸馏方法主要是基于从中间层提取深层特征&#xff0c;而忽略了Logit蒸馏的重要性。为了给logit蒸馏研究提供一个新的视角&#xff0c;我们将经典的KD损失重新表述为两部分&#xff0c;即目标类知识蒸馏&#xff08;TCKD&a…
阅读更多...
2024 年广东省职业院校技能大赛（高职组）“云计算应用”赛项样题 2

2024 年广东省职业院校技能大赛（高职组）“云计算应用”赛项样题 2

#需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; 某企业根据自身业务需求&#…
阅读更多...
第八节 龙晰Anolis 8.8 安装 DDE 桌面环境

第八节 龙晰Anolis 8.8 安装 DDE 桌面环境

一、前言 最小化安装的龙晰 Anolis OS 8.8 是不带图形化界面的&#xff0c;只能使用命令行&#xff0c;有些时候需要用到桌面环境&#xff0c;而DDE (Deepin Desktop Enviroment) 就是很好的桌面环境&#xff0c;它是指龙晰 Anolis 所搭载的中国自主桌面环境&#xff0c;用起来…
阅读更多...
常数项级数

常数项级数

定义 级数的形式如下&#xff1a; ∑ n 1 ∞ u n u 1 u 2 u 3 . . . u n . . . \sum_{n1}^{\infin}u_n u_1u_2u_3...u_n... n1∑∞​un​u1​u2​u3​...un​... 这个数列的项数是无穷多个&#xff0c;如果取其前n项 S n u 1 u 2 . . . u n S_n u_1u_2...u_n Sn…
阅读更多...
Java集合相关面试题（2024大厂高频面试题系列）

Java集合相关面试题（2024大厂高频面试题系列）

1、说一说Java提供的常见集合&#xff1f;&#xff08;画一下集合结构图&#xff09; 在java中提供了量大类的集合框架&#xff0c;主要分为两类&#xff1a; 第一个是Collection 属于单列集合&#xff0c;第二个是Map 属于双列集合 在Collection中有两个子接口List和Set。…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站