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作为一款跨平台开发框架,采用了前后端分离的开发模式。这意味着前端和后端的开发可以独立进行,互不影响。…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
