springboot+Vue--打基础升级--(二)写个主菜单导航界面

1. 华为OD机考题 + 答案

2023华为OD统一考试(A+B卷)题库清单-带答案(持续更新)

2023年华为OD真题机考题库大全-带答案(持续更新)

2. 面试题

一手真实java面试题:2023年各大公司java面试真题汇总--持续更新

3. 技术知识

java后端技术汇总 + 中间件 + 架构思想

通过写一个简单的LoginView.vue来学习下,新手如何学习前端知识

配置环境:搭建环境

1.首先在src 创建个view文件夹,创建一个LoginView.vue

2. 在LoginView.vue里先写个简单的文字,验证打开

 3. 写完登录的vue,那怎么打开呢,肯定是要关联到我们的idex.js的,在里面做路由的配置,这样我们才能在浏览器上打开界面

 框框中标签的解释说明: 

这是一个使用Vue Router库的代码片段。它定义了一个新的路由器实例,并设置了其模式为'history',这意味着URL将采用类似传统的URL模式(没有'#'符号)。同时,它还定义了一个路由数组,其中包含一个路由对象

这个路由对象具有以下属性:

  • path: 路由的路径,这里是'/login',也就是当用户访问应用的根URL后,会显示LoginView组件的内容。
  • name: 路由的名称,通常用于命名路由链接或导航。
  • component: 该路由对应的组件,这里是LoginView组件。当用户访问匹配到这个路由的URL时,将会渲染这个组件。

总的来说,这段代码的作用是设置一个名为'login'的路由,当用户访问'/login' URL时,会展示LoginView组件的内容。

4. 地址栏输入:http://localhost:8085/login

5. 在主界面用element做个左侧导航栏

不知道为啥 最上面有空白,,嗨 脑壳疼 ,嗯 头像帅就行。。。

 

 

 问题一:elementUI标签不生效,没反应

 

解决方式:

在终端以下指令安装element-ui

cnpm install element-ui --save-dev

输入指令安装完成之后,在package.json文件,devDependencies依赖当中就可以看到已经安装好了element-ui

 

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

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

相关文章

【李沐】3.2线性回归从0开始实现

%matplotlib inline import random import torch from d2l import torch as d2l1、生成数据集: 看最后的效果,用正态分布弄了一些噪音 上面这个具体实现可以看书,又想了想还是上代码把: 按照上面生成噪声,其中最后那…

YOLOv8改进后效果

数据集 自建铁路障碍数据集-包含路障,人等少数标签。其中百分之八十作为训练集,百分之二十作为测试集 第一次部署 版本:YOLOv5 训练50epoch后精度可达0.94 mAP可达0.95.此时未包含任何改进操作 第二次部署 版本:YOLOv8改进版本 首…

Spring Boot 知识集锦之Spring-Batch批处理组件详解

文章目录 0.前言1.参考文档2.基础介绍2.1. 核心组件 3.步骤3.1. 引入依赖3.2. 配置文件3.3. 核心源码 4.示例项目5.总结 0.前言 背景: 一直零散的使用着Spring Boot 的各种组件和特性,从未系统性的学习和总结,本次借着这个机会搞一波。共同学…

从零实战SLAM-第四课(相机成像及常用视觉传感器)

在七月算法报的班,老师讲的蛮好。好记性不如烂笔头,关键内容还是记录一下吧,课程入口,感兴趣的同学可以学习一下。 --------------------------------------------------------------------------------------------------------…

如何学习专业的学术用语01

问题的提出——凭啥人家写的词汇这么专业 做法一 做法二:做一个专业数据库 专门做教育技术类的

Java进阶篇--迭代器模式

目录 同步迭代器(Synchronous Iterator): Iterator 接口 常用方法: 注意: 扩展小知识: 异步迭代器(Asynchronous Iterator): 常用的方法 注意: 总结&#xff1a…

【制作npm包4】api-extractor 学习

制作npm包目录 本文是系列文章, 作者一个橙子pro,本系列文章大纲如下。转载或者商业修改必须注明文章出处 一、申请npm账号、个人包和组织包区别 二、了解 package.json 相关配置 三、 了解 tsconfig.json 相关配置 四、 api-extractor 学习 五、npm包…

【云计算原理及实战】初识云计算

该学习笔记取自《云计算原理及实战》一书,关于具体描述可以查阅原本书籍。 云计算被视为“革命性的计算模型”,因为它通过互联网自由流通使超级计算能力成为可能。 2006年8月,在圣何塞举办的SES(捜索引擎战略)大会上&a…

万宾燃气管网监测解决方案,守护城市生命线安全

方案背景 城市燃气管网作为连接天然气长输管线与天然气用户的桥梁,担负着向企业和居民用户直接供气的重要职责。随着城市燃气需求的急剧增加,城市燃气管网规模日趋庞大,安全隐患和风险也随之增加。目前,我国燃气管网的运行仍存在…

OLED透明屏采购指南:如何选择高质量产品?

着科技的不断进步,OLED透明屏作为一种创新的显示技术,在各个行业中得到了广泛应用。 在进行OLED透明屏采购时,选择高质量的产品至关重要。在这篇文章中,尼伽将为您提供一个全面的OLED透明屏采购指南,帮助您了解关键步…

Beats:使用 Filebeat 将 golang 应用程序记录到 Elasticsearch - 8.x

毫无疑问,日志记录是任何应用程序最重要的方面之一。 当事情出错时(而且确实会出错),我们需要知道发生了什么。 为了实现这一目标,我们可以设置 Filebeat 从我们的 golang 应用程序收集日志,然后将它们发送…

【CSS动画02--卡片旋转3D】

CSS动画02--卡片旋转3D 介绍代码HTMLCSS css动画02--旋转卡片3D 介绍 当鼠标移动到中间的卡片上会有随着中间的Y轴进行360的旋转&#xff0c;以下是几张图片的介绍&#xff0c;上面是鄙人自己录得一个供大家参考的小视频&#x1f92d; 代码 HTML <!DOCTYPE html>…

Android Stodio编译JNI项目,Cmake出错:Detecting C compiler ABI info - failed

在使用Android Stodio编译JNI项目时出现Cmake错误&#xff0c;报错如下&#xff1a; Execution failed for task :app:configureCMakeDebug[arm64-v8a]. > [CXX1429] error when building with cmake using C:\Users\Dell\AndroidStudioProjects\MyApplication2\app\src\ma…

ssm医院门诊挂号系统源码和论文PPT

ssm医院门诊挂号系统源码和论文PPT008 开题报告 任务书 源码 数据库sql 论文 开发环境&#xff1a; 开发工具&#xff1a;idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具&#xff1a;navcat,小海豚等 开发技术&#xff1a;java ssm tomcat8.5 1.选题的背景和意义 …

UVC摄像头

1 版本历史 1.1 UVC uvc_version UVC 1.0: Sep-4-2003 UVC 1.1: Jun-1-2005 UVC 1.5: August-9-2012, H.264 video codec. Linux 4.5 introduces UVC 1.5, but does not support H264. 1.2 V4L版本历史 Video4Linux取名的灵感来自1992 Video for Windows&#xff08;V4W&#x…

k8s 自身原理之 Service

好不容易&#xff0c;终于来到 k8s 自身的原理之 关于 Service 的一部分了 前面我们用 2 个简图展示了 pod 之间和 pod 与 node 之间是如何通信息的&#xff0c;且通信的数据包是不会经过 NAT 网络地址转换的 那么 Service 又是如何实现呢&#xff1f; Service 我们知道是用…

linux——mysql的高可用MHA

目录 一、概述 一、概念 二、组成 三、特点 四、工作原理 二、案例 三、构建MHA 一、基础环境 二、ssh免密登录 三、主从复制 master slave1 四、MHA安装 一、环境 二、安装node 三、安装manager 一、概述 一、概念 MHA&#xff08;MasterHigh Availability&a…

C++坦克大战源代码

源码: #include <iostream> #include <time.h> #include <windows.h>#define W 1 //上 #define S 2 //下 #define A 3 //左 #define D 4 //右 #define L 5 // 坦克有4条命void HideCursor() { //隐藏光标 …

visual studio 2017 运行的程序关闭后不能再运行?(visual studio建立项目之后退出,如何再次完整打开项目?)

在你储存项目的文件夹里面应该是这样的 里面.vcxproj后缀名的就是原来创建的项目&#xff0c;直接打开这个头文件源文件就会一起出来了&#xff01; 真的管用&#xff0c;亲测有效。

openGauss学习笔记-44 openGauss 高级数据管理-存储过程

文章目录 openGauss学习笔记-44 openGauss 高级数据管理-存储过程44.1 语法格式44.2 参数说明44.3 示例 openGauss学习笔记-44 openGauss 高级数据管理-存储过程 存储过程是能够完成特定功能的SQL语句集。用户可以进行反复调用&#xff0c;从而减少SQL语句的重复编写数量&…