vue后台管理系统从0到1搭建(4)各组件的搭建

文章目录

  • vue后台管理系统从0到1搭建(4)各组件的搭建
    • Main.vue 组件的初构

vue后台管理系统从0到1搭建(4)各组件的搭建

在这里插入图片描述

Main.vue 组件的初构

根据我们的效果来看,分析一下,我们把左边的区域分为一个组件,上面的header栏分为一个组件,还有就是下面的主页
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
ok,我们main组件的实现代码如下:
在这里插入图片描述
Main.vue

<script setup></script><template>
<div class="common-layout"><el-container class="lay-container">
<!--  自定义左侧的组件--><common-aside><el-container><el-header class="el-header"><common-header></common-header></el-header><el-mainL class="right-main">main</el-mainL></el-container></common-aside></el-container></div>
</template><style>
.common-layout,.lay-container{height: 100%;
}
.el-header{background-color: #333;
}
</style>

重启项目,这里会发现报错
在这里插入图片描述
我们尝试全部引入element组件,貌似是我们的按需引入出现了问题,注释掉按需引入的代码

在这里插入图片描述
在main.js中使用全部引入的方式
在这里插入图片描述
main.js

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/less/index.less'
import router from "@/router/index.js";import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.use(router);
app.mount('#app');

在app.vue中删除多余的代码变成如下:
在这里插入图片描述
App.vue

<script></script><template><RouterView></RouterView></template><style scoped></style>

重构Main.vue
在这里插入图片描述
Main.vue

<script setup>
// 可以在这里添加组件的逻辑
</script><template><div class="common-layout"><el-container><el-aside width="200px" class="aside-container"><!-- 侧边栏内容 --><common-aside></common-aside></el-aside><el-container><el-header class="el-header"><common-header></common-header></el-header><el-main class="right-main">main</el-main></el-container></el-container></div>
</template><style>
.common-layout,.lay-container{height: 100%;
}
.el-header{background-color: #333;
}
</style>

重启项目:
在这里插入图片描述

如果是这样,就好了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Learn OpenGL In Qt之纹理

竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生~ 公众号&#xff1a; C学习与探索 | 个人主页&#xff1a; rainInSunny | 个人专栏&#xff1a; Learn OpenGL In Qt 文章目录 纹理纹理坐标纹理环绕方式纹理采样多级渐远纹理 纹理加载和创建加载纹理创建纹理 应用纹理 纹理 纹理坐标…

等保测评在各个行业的应用

等保测评的基本概念和流程 等保测评&#xff0c;即网络安全等级保护测评&#xff0c;是根据国家相关法律法规和标准&#xff0c;对信息系统实施安全等级划分&#xff0c;并针对各等级采取相应安全保护措施的过程。等保测评的流程通常包括信息系统定级、备案、安全建设、等级测评…

Element UI 的 el-tree 组件节点取消双击后的鼠标选中文字状态

要取消 Element UI 的 el-tree 组件节点双击后的鼠标选中文字状态&#xff0c;你可以通过以下几种方式来实现&#xff1a; 使用 CSS 禁止选中&#xff1a; 你可以在全局样式中或者特定的树节点上添加 CSS 规则&#xff0c;来禁止用户选择文本。例如&#xff0c;你可以在 el-tre…

【AWS AMI跨境备份】跨境使用 S3 备份和还原 AMI 镜像

文章目录 一、实验场景二、实验目标三、实验架构图四、涉及到AWS服务五、演示操作5.1 创建EC2实例5.2 创建映像5.3 备份AMI至Global S35.4 复制AMI从Global S3至 CN S35.5 还原AMI5.6 测试AMI 六、参考链接 一、实验场景 将 AWS Global区域的EC2实例备份至 AWS CN区域。 备份…

苍穹外卖学习笔记(二十五)

文章目录 Spring Task介绍应用场景&#xff1a; cron表达式例如&#xff1a; 入门案例 订单状态定时处理处理超时订单处理一直配送中的订单OrderMapper WebSocket介绍HTTP协议和WebSocket协议对比应用场景&#xff1a;入门案例1. 使用websocket.html作为WebSocket客户端2. 导入…

Windows多线程编程 互斥量和临界区使用

Windows 多线程编程允许程序同时运行多个线程&#xff0c;提高程序的并发性和执行效率。多线程编程中的核心概念包括线程的创建、同步、调度、数据共享和竞争条件等。本文详细介绍了 Windows 多线程编程的关键技术点&#xff0c;并解释如何使用线程同步机制来保证线程安全。 1…

2.2.ReactOS系统,系统调用表MainSSDT的实现

2.2.ReactOS系统&#xff0c;系统调用表MainSSDT的实现 2.2.ReactOS系统&#xff0c;系统调用表MainSSDT的实现 文章目录 2.2.ReactOS系统&#xff0c;系统调用表MainSSDT的实现系统调用表MainSSDTSVC_ 宏的定义sysfuncs.h函数的声明 系统调用表MainSSDT ULONG_PTR MainSSDT[…

【FFmpeg系列】:图片处理

引言 FFmpeg 是一个功能强大的多媒体处理工具&#xff0c;广泛应用于音视频处理领域。然而&#xff0c;它的图片处理能力同样不容忽视。本文将深入探讨 FFmpeg 在图片处理方面的高级技巧和优化方法&#xff0c;帮助您更高效地完成图片处理任务。 一、图片格式转换 1.1 基础转…

前端打印功能(vue +springboot)

后端 后端依赖生成pdf的方法pdf转图片使用(用的打印模版是带参数的 ,参数是aaa)总结 前端页面 效果 后端 依赖 依赖 一个是用模版生成对应的pdf,一个是用来将pdf转成图片需要的 <!--打印的--><dependency><groupId>net.sf.jasperreports</groupId>&l…

LCD补充

LCD补充 目录 LCD补充 tip:随着我们学的越来越多&#xff0c;代码长度越来越长&#xff0c;编译越来越慢&#xff0c;有没有超过内存是我们比较关心的一件事&#xff0c;通过以下方法可以实时看到写的代码的大小 回顾LCD LCD补充功能 -- 1、有关在LCD上显示动图&#xff…

前端使用Canvas实现网页电子签名(撤销、下载)

前言&#xff1a;一般在一些后台的流程资料以及审核的场景中会需要电子签名&#xff0c;介绍一种用canvas实现的电子签名&#xff0c;此案例用的是原生js 效果展示&#xff1a; 一、html和css&#xff1a; <div class"divCla2"><canvas id"myCanvas&q…

数据结构-排序算法

基于交换的排序算法 快速排序&#xff1a; 最优情况 最优情况下&#xff0c;每次找到的参考轴把数据分成均匀的两半&#xff0c;最后应该是一个平衡二叉树状态&#xff1b;二叉树的层数&#xff08;logn&#xff09;即为递归需要进行的次数&#xff0c;并且每轮递归结束时&…

Java语言-抽象类

目录 1.抽象类概念 2.抽象类语法 3.抽象类特性 4.抽象类作用 1.抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c; 如果 一个类中没有包含足够的信息来描绘一个具体…

YARN调度原理详解

YARN&#xff08;Yet Another Resource Negotiator&#xff09;是 Hadoop 集群的资源管理和作业调度框架&#xff0c;它的设计旨在更好地管理和调度 Hadoop 集群中的资源。YARN 解决了传统 Hadoop MapReduce 中资源管理与作业调度紧耦合的问题&#xff0c;使得不同类型的计算任…

115.WEB渗透测试-信息收集-ARL(6)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;114.WEB渗透测试-信息收集-ARL&#xff08;5&#xff09; httpd就是apache环境&#xff0…

跨平台音摄像头|屏幕推送选OBS还是SmartPublisher?

好多开发者希望搞明白OBS和 SmartPublisher的区别和使用场景差别&#xff0c;本文就二者差别做个对比&#xff1a; OBS OBS&#xff08;Open Broadcaster Software&#xff09;是一款免费且开源的跨平台流媒体和视频录制软件。以下是关于它的详细介绍&#xff1a; 功能特点&a…

力扣----最长连续序列

128. 最长连续序列 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4 解释&#xff1a;最长数字连续序列是 [1, 2, 3, 4]。它的长度为 4。 示例 2&#xff1a; 输入&#xff1a;nums [0,3,7,2,5,8,4,6,0,1] 输出&#xff1a;9提示&#xff…

音乐播放器项目专栏介绍​

1.简介 本专栏使用Qt QWidget作为显示界面&#xff0c;你将会学习到以下内容&#xff1a; 1.大量ui美化的实例。 2.各种复杂ui布局。 3.常见显示效果实现。 4.大量QSS实例。 5.Qt音频播放&#xff0c;音乐歌词文件加载&#xff0c;展示。 6.播放器界面换肤。 相信学习了本专栏…

[单master节点k8s部署]39.安装mysql

通过下面的命令安装mysql。首先下载mysql的rpm包。mysql-community-release-el7-5.noarch.rpm 这个包的作用是将 MySQL 的官方 YUM 仓库添加到系统中&#xff0c;随后通过yum install来安装mysql。 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm rpm …

Oracle Expdp按条件导出-指定表数据

1.场景描述 业务需求&#xff1a;导出A机构、2024的数据&#xff0c;以dmp格式&#xff0c;保留导出日志。首先&#xff0c;需要分析库中需要导出的表清单、表的机构字段约束、表的时间约束&#xff1b;然后再导出。 2.方案分析 本次采用Oracle的expdp数据泵方式导出&#xf…