当前位置: 首页 > news >正文

32.(前端)主页布局

1.element-ui的页面布局使用

1.1查看布局组件

访问element的官网,可以搜索自己喜欢的页面布局代码
在这里插入图片描述

1.2找到自己所喜欢的布局样式并引入

先找到对应图片
在这里插入图片描述
对应代码直接引入到Home.vue组件中

<!-- src/compoents/Home.vue -->
<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
                <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
</script>

<style lang="less" scoped>
</style>

发现报错,并没有引入代码
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
原因是,我们还没有引入组件,只是把代码抄了
在这里插入图片描述

1.2.1处理报错

// src/plugin/elements
import Vue from 'vue'
import { Button, FormItem, Form, Input, Message, Header, Container, Aside } from 'element-ui'
// import { Button } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Header)
Vue.use(Container)
Vue.use(Aside)
Vue.prototype.$msg = Message

2.完整代码

<!-- src/compoents/Home.vue -->
<template>
    <el-container class="home-container">
        <el-header>
            <div>
                <img src="../assets/logo.png">
                <span>电子后台管理系统</span>
            </div>
            <el-button type="primary">退出</el-button>
        </el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
                <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
</script>

<style lang="less" scoped>
// 整个组件

.home-container{
    height: 100%;
}
// 界面顶
.el-header{
    display: flex;
    align-items: center; //居中操作
    background-color: #409EFF;
    justify-content: space-between;
    color: #fff;
    font-size: 20px;
    img{
        height: 50px;
        width: 100px;
    }
    div{
        display: flex;
        align-items: center;
    }
}
// 侧面
.el-aside{
    background-color: #303133;
}
// 中间
.el-main{
    background-color: #e4e7ed;
}
</style>

3.效果展示

在这里插入图片描述

相关文章:

  • 【Python】9*9乘法口诀表(while、for两种循环)
  • React中组件通信有哪些方式
  • Redux简单使用
  • 【PyTorch深度学习项目实战100例】—— 基于Conv3D实现三维立体MNIST数据集分类 | 第54例
  • 当心!你的App 可能是山寨的
  • 前端面试问题(5)
  • 十年网安行业代表性案例出炉,中睿天下Web攻击溯源案例实力入选
  • ARMv8/ARMv8的TLB深度学习
  • 【建议背诵】2022下半年软考「集成」100题(8)
  • 昇腾AI室外移动机器人学习指南(1 前言)
  • 【100个 Unity实用技能】| Unity中 检查当前设备网络状态 的几种方法整理
  • Db2数据库计算年龄
  • C++继承时常见问题
  • 【带你了解C语言预处理指令】
  • SLAM本质剖析-Boost之Geometry函数大全(一)
  • 4、MySQL数据管理
  • 谈谈测试员的地位:此刻,我想为所有从事测试职业的人发声…
  • DBCO-PEG12-Maleimide,DBCO-PEG12-Mal具有DBCO和Maleimide巯基反应试剂
  • 在Spring Boot项目中使用统一返回结果
  • 249 - 数据流