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>
重启项目:

如果是这样,就好了。
相关文章:
vue后台管理系统从0到1搭建(4)各组件的搭建
文章目录 vue后台管理系统从0到1搭建(4)各组件的搭建Main.vue 组件的初构 vue后台管理系统从0到1搭建(4)各组件的搭建 Main.vue 组件的初构 根据我们的效果来看,分析一下,我们把左边的区域分为一个组件&am…...
LabVIEW开关磁阻电机特性测量系统
基于LabVIEW软件和特定硬件组件的开关磁阻电机(SRM)特性测量系统,结合多功能数据采集卡,统能够准确地测量并分析SRM的电磁特性,从而支持电机模型的精确建立和性能优化。 项目背景 在工业生产和家用电器领域࿰…...
在当前网络环境中查看所有IPv4与Mac地址的方法
在powershell界面中: # 获取并显示所有网络接口的MAC地址和IPv4地址 Get-NetAdapter | Select-Object -Property Name, MacAddress, Status Get-NetAdapter | Get-NetIPAddress -AddressFamily IPv4 | Select-Object -Property InterfaceAlias, IPAddress, PrefixL…...
CSS @规则(At-rules)系列详解___@charset规则使用方法
CSS 规则(At-rules)系列详解 ___charset规则使用方法 本篇目录: 零、时光宝盒 一、charset规则定义和用法 二、CSS charset语法 三、charset 使用方法例子 1、正确使用方法 2、无效的,错误的使用方法 零、时光宝盒 (https://blog.csd…...
黑马程序员C++核心编程学习笔记
黑马程序员C核心编程学习笔记 一、内存 1.1 内存四区 C程序在执行时,将内存大致分为4个区域:代码区,全局区,栈区,堆区 代码区:存放函数体的的二进制代码,操作系统管理。 🔵特点&a…...
六自由度平台
力姆泰克六自由度平台 安装方便,维护简单 多重机械电气安全保护 向下翻动查看更多 力姆泰克伺服系统集成 全新革命性结构设计与六轴先进伺服控制原理的结合,力姆泰克公司引进国外的专业技术在国内全新推出 全电动六自由度平台。将完全替代市场上原有的…...
【Node.js 下载及npm安装配置】亲测可用
Node.js 下载及npm安装配置 安装nodejs设置安装angular 安装nodejs 下载适用自己系统的node.js,官网:https://nodejs.cn/download/。默认安装即可。查看是否安装成功,node -v,npm -v ,出现版本号即安装成功。 设置 …...
Qt C++设计模式->访问者模式
访问者模式(Visitor Pattern)是一种行为型设计模式,它将操作与对象结构分离,使得你可以在不改变对象结构的前提下定义作用于这些对象的新操作。访问者模式通过引入一个访问者对象,允许你在不修改类的前提下向已有类添加…...
手机在网状态的详细应用场景有哪些?
手机在网状态的详细应用场景涵盖了多个行业和领域,以下是一些具体的例子: 金融行业 风控审核:银行、贷款公司等金融机构在审批贷款或信用卡时,可以通过查询手机在网状态来验证申请人的手机号码是否真实有效,从而降低欺…...
Linux的kafka安装部署
1.kafka是一个分布式的,去中心化的,高吞吐低延迟,订阅模式的消息队列系统 确保要有jdk与zookeeper安装配置 2.下载kafka安装包 http://archive.apache.org/dist/kafka/2.4.1/kafka_2.12-2.4.1.tgz 此时可以wget http://archive.apache.org/dist/kafka/2.4.1/kafka_2.12-2.4.…...
docker部署虚拟机
创建新的容器web02,-v表示目录映射,-p时端口映射,把宿主机目录挂载到容器中 docker run -itd -p 80:80 -v /data/webapps/www/:/usr/share/nginx/html/ --nameweb02 nginx:latest 此时我们在发布网站时只需要放在宿主机的目录里就可以了 解…...
如何用ChatGPT 8小时写出一篇完整论文(附完整提示词)
今天教大家如何利用ChatGPT完成一篇完整的论文。只需要一个标题,剩下全部由ChatGPT完成。总耗时8小时。 阅前提醒: 1.适用人群:这个方法适合应付简单的学术任务,比如日常小论文或投稿一般期刊。但如果你要写高水平的论文…...
AWS MySQL 升级(三)—— TAZ - 近0停机的小版本升级方案
与AWS交流了解到的新方案,没有实际试过,所以本篇主要是些原理 一、 TAZ的含义 TAZ实际上就是 3 AZ,扩展一些就是 Multi-AZ DB Cluster,即在3个可用区部署DB,具备两个只读备用实例。 二、 TAZ的主要用途 1. 近0停机的小…...
Redis的应用以及Redis工具类的封装
在前后端分离的项目中,通过session和cookie的通信一般就失去效益了,即使这么做了也会产生著名的漏洞问题CSRF(Cross-site request forgery), 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。因…...
E系列I/O模块在锂电装备制造系统的应用
为了满足电池生产线对稳定性和生产效率的严苛要求,ZLG致远电子推出高速I/O应用方案,它不仅稳定可靠,而且速度快,能够迅速响应生产需求。 锂电池的生产工艺较为复杂,大致分为三个主要阶段:极片制作、电芯制作…...
ElasticsearchClient入门指南
在本教程中,我们将探讨如何使用Elasticsearch的官方Java客户端 - ElasticsearchClient。这个强大的工具允许您的Java应用程序与Elasticsearch集群进行交互,执行各种操作,如索引文档、执行搜索查询等。 前提条件 在开始之前,确保您的项目中已经包含了必要的依赖。您可以通过Ma…...
软考中级笔记
上午题 二 程序设计语言 6′ 1、编译程序和解释程序 解释器:翻译源程序时不生成独立的目标程序。 解释程序和源程序要参与到程序的运行过程中。 编译器:翻译时将源程序翻译成独立保存的目标程序。 机器上运行的是与源程序等价的目标程序。 源程序和编…...
学习python自动化——pytest单元测试框架
一、什么是pytest 单元测试框架,unittest(python自带的),pytest(第三方库)。 用于编写测试用例、收集用例、执行用例、生成测试结果文件(html、xml) 1.1、安装pytest pip instal…...
定位、地图建立及管理合集
系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言机器人中常见的定位技术介绍一、直方图定位原理二、gnss、rtk定位原理三、【依赖二维激光雷达与全局地图的定位算法】amcl&am…...
uniAPP是否可以做php语言书写后端的前端开发?
UniAPP可以做PHP语言书写后端的前端开发。以下是关于这个问题的详细解答: 一、UniAPP与后端开发的关系 前后端分离:UniAPP作为一款跨平台开发框架,采用了前后端分离的开发模式。这意味着前端和后端的开发可以独立进行,互不影响。…...
嵌入式软件工程师面试技术要点解析
嵌入式软件工程师面试技术要点解析1. 通信接口技术1.1 RS-485通信特性RS-485标准采用差分信号传输,物理层上支持全双工通信,但在实际应用中通常配置为半双工模式。这种设计选择主要基于以下工程考虑:半双工模式下只需一对双绞线,显…...
OpenClaw终端增强:Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF实现命令行智能补全与解释
OpenClaw终端增强:Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF实现命令行智能补全与解释 1. 为什么需要智能终端助手 作为每天与终端打交道的开发者,我经常陷入这样的困境:面对复杂的docker compose命令需要反复查阅文档…...
【Python内存管理终极指南】:20年专家亲授智能体内存优化的5大核心配置步骤
第一章:Python智能体内存管理的底层原理与认知重构Python 的内存管理并非由开发者显式控制,而是通过一套高度协同的自动化机制实现——它融合了引用计数、循环垃圾回收(GC)与内存池(pymalloc)三层结构。这种…...
终极指南:AutoDock Vina如何轻松处理含金属元素的分子对接难题
终极指南:AutoDock Vina如何轻松处理含金属元素的分子对接难题 【免费下载链接】AutoDock-Vina AutoDock Vina 项目地址: https://gitcode.com/gh_mirrors/au/AutoDock-Vina 你是否曾在使用AutoDock Vina进行分子对接时,遇到"Atom type Pd i…...
英雄联盟智能助手:5个核心功能彻底改变你的游戏体验
英雄联盟智能助手:5个核心功能彻底改变你的游戏体验 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为繁琐的游戏…...
【STM32-HAL库】火焰传感器实战:从原理到智能火灾预警系统搭建(基于STM32F407ZGT6)
1. 火焰传感器原理与选型指南 火焰传感器作为火灾预警系统的"眼睛",其核心原理是利用光电效应检测火焰特有的光谱特征。我经手过的工业项目中,90%的火灾误报都源于传感器选型不当。市面上常见的火焰传感器主要分为三类: 红外型&…...
保姆级教程:在Jeecg-Vue3项目中快速集成SuperQuery高级查询组件(含完整配置代码)
Jeecg-Vue3项目实战:SuperQuery高级查询组件深度集成指南 在后台管理系统开发中,高效的数据筛选功能直接影响用户体验和操作效率。Jeecg-Vue3作为企业级快速开发框架,其内置的SuperQuery组件能够帮助开发者快速构建复杂的多条件查询面板。本文…...
三步打造你的专属阅读空间:开源阅读鸿蒙版深度体验
三步打造你的专属阅读空间:开源阅读鸿蒙版深度体验 【免费下载链接】legado-Harmony 开源阅读鸿蒙版仓库 项目地址: https://gitcode.com/gh_mirrors/le/legado-Harmony 还在为广告弹窗打断阅读体验而烦恼吗?还在为找不到心仪内容而四处奔波吗&am…...
突破数字阅读壁垒:bypass-paywalls-chrome-clean工具深度实战指南
突破数字阅读壁垒:bypass-paywalls-chrome-clean工具深度实战指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息获取成本日益增高的今天,优质内容常常…...
从‘噬菌体’到清晰地图:我的LIO-SAM避坑实战记录(含Ubuntu版本选择建议)
从“噬菌体”到清晰地图:LIO-SAM实战避坑指南与Ubuntu版本选择建议 第一次在RViz里看到那个旋转成筒状的地图时,我盯着屏幕足足愣了三分钟——这和我预想中的高精度点云地图相差了十万八千里。更令人崩溃的是,当我把设备搬到室外测试时&#…...
