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

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搭建&#xff08;4&#xff09;各组件的搭建Main.vue 组件的初构 vue后台管理系统从0到1搭建&#xff08;4&#xff09;各组件的搭建 Main.vue 组件的初构 根据我们的效果来看&#xff0c;分析一下&#xff0c;我们把左边的区域分为一个组件&am…...

LabVIEW开关磁阻电机特性测量系统

基于LabVIEW软件和特定硬件组件的开关磁阻电机&#xff08;SRM&#xff09;特性测量系统&#xff0c;结合多功能数据采集卡&#xff0c;统能够准确地测量并分析SRM的电磁特性&#xff0c;从而支持电机模型的精确建立和性能优化。 项目背景 在工业生产和家用电器领域&#xff0…...

在当前网络环境中查看所有IPv4与Mac地址的方法

在powershell界面中&#xff1a; # 获取并显示所有网络接口的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规则使用方法 本篇目录&#xff1a; 零、时光宝盒 一、charset规则定义和用法 二、CSS charset语法 三、charset 使用方法例子 1、正确使用方法 2、无效的&#xff0c;错误的使用方法 零、时光宝盒 &#xff08;https://blog.csd…...

黑马程序员C++核心编程学习笔记

黑马程序员C核心编程学习笔记 一、内存 1.1 内存四区 C程序在执行时&#xff0c;将内存大致分为4个区域&#xff1a;代码区&#xff0c;全局区&#xff0c;栈区&#xff0c;堆区 代码区&#xff1a;存放函数体的的二进制代码&#xff0c;操作系统管理。 &#x1f535;特点&a…...

六自由度平台

力姆泰克六自由度平台 安装方便&#xff0c;维护简单 多重机械电气安全保护 向下翻动查看更多 力姆泰克伺服系统集成 全新革命性结构设计与六轴先进伺服控制原理的结合&#xff0c;力姆泰克公司引进国外的专业技术在国内全新推出 全电动六自由度平台。将完全替代市场上原有的…...

【Node.js 下载及npm安装配置】亲测可用

Node.js 下载及npm安装配置 安装nodejs设置安装angular 安装nodejs 下载适用自己系统的node.js&#xff0c;官网&#xff1a;https://nodejs.cn/download/。默认安装即可。查看是否安装成功&#xff0c;node -v&#xff0c;npm -v &#xff0c;出现版本号即安装成功。 设置 …...

Qt C++设计模式->访问者模式

访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;它将操作与对象结构分离&#xff0c;使得你可以在不改变对象结构的前提下定义作用于这些对象的新操作。访问者模式通过引入一个访问者对象&#xff0c;允许你在不修改类的前提下向已有类添加…...

手机在网状态的详细应用场景有哪些?

手机在网状态的详细应用场景涵盖了多个行业和领域&#xff0c;以下是一些具体的例子&#xff1a; 金融行业 风控审核&#xff1a;银行、贷款公司等金融机构在审批贷款或信用卡时&#xff0c;可以通过查询手机在网状态来验证申请人的手机号码是否真实有效&#xff0c;从而降低欺…...

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&#xff0c;-v表示目录映射&#xff0c;-p时端口映射&#xff0c;把宿主机目录挂载到容器中 docker run -itd -p 80:80 -v /data/webapps/www/:/usr/share/nginx/html/ --nameweb02 nginx:latest 此时我们在发布网站时只需要放在宿主机的目录里就可以了 解…...

如何用ChatGPT 8小时写出一篇完整论文(附完整提示词)

今天教大家如何利用ChatGPT完成一篇完整的论文。只需要一个标题&#xff0c;剩下全部由ChatGPT完成。总耗时8小时。 阅前提醒&#xff1a; 1.适用人群&#xff1a;这个方法适合应付简单的学术任务&#xff0c;比如日常小论文或投稿一般期刊。但如果你要写高水平的论文&#xf…...

AWS MySQL 升级(三)—— TAZ - 近0停机的小版本升级方案

与AWS交流了解到的新方案&#xff0c;没有实际试过&#xff0c;所以本篇主要是些原理 一、 TAZ的含义 TAZ实际上就是 3 AZ&#xff0c;扩展一些就是 Multi-AZ DB Cluster&#xff0c;即在3个可用区部署DB&#xff0c;具备两个只读备用实例。 二、 TAZ的主要用途 1. 近0停机的小…...

Redis的应用以及Redis工具类的封装

在前后端分离的项目中&#xff0c;通过session和cookie的通信一般就失去效益了&#xff0c;即使这么做了也会产生著名的漏洞问题CSRF&#xff08;Cross-site request forgery&#xff09;&#xff0c; 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。因…...

E系列I/O模块在锂电装备制造系统的应用

为了满足电池生产线对稳定性和生产效率的严苛要求&#xff0c;ZLG致远电子推出高速I/O应用方案&#xff0c;它不仅稳定可靠&#xff0c;而且速度快&#xff0c;能够迅速响应生产需求。 锂电池的生产工艺较为复杂&#xff0c;大致分为三个主要阶段&#xff1a;极片制作、电芯制作…...

ElasticsearchClient入门指南

在本教程中,我们将探讨如何使用Elasticsearch的官方Java客户端 - ElasticsearchClient。这个强大的工具允许您的Java应用程序与Elasticsearch集群进行交互,执行各种操作,如索引文档、执行搜索查询等。 前提条件 在开始之前,确保您的项目中已经包含了必要的依赖。您可以通过Ma…...

软考中级笔记

上午题 二 程序设计语言 6′ 1、编译程序和解释程序 解释器&#xff1a;翻译源程序时不生成独立的目标程序。 解释程序和源程序要参与到程序的运行过程中。 编译器&#xff1a;翻译时将源程序翻译成独立保存的目标程序。 机器上运行的是与源程序等价的目标程序。 源程序和编…...

学习python自动化——pytest单元测试框架

一、什么是pytest 单元测试框架&#xff0c;unittest&#xff08;python自带的&#xff09;&#xff0c;pytest&#xff08;第三方库&#xff09;。 用于编写测试用例、收集用例、执行用例、生成测试结果文件&#xff08;html、xml&#xff09; 1.1、安装pytest pip instal…...

定位、地图建立及管理合集

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言机器人中常见的定位技术介绍一、直方图定位原理二、gnss、rtk定位原理三、【依赖二维激光雷达与全局地图的定位算法】amcl&am…...

uniAPP是否可以做php语言书写后端的前端开发?

UniAPP可以做PHP语言书写后端的前端开发。以下是关于这个问题的详细解答&#xff1a; 一、UniAPP与后端开发的关系 前后端分离&#xff1a;UniAPP作为一款跨平台开发框架&#xff0c;采用了前后端分离的开发模式。这意味着前端和后端的开发可以独立进行&#xff0c;互不影响。…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...