[vue3后台管理二]首页和登录测试

news2024/11/24 2:06:46

[vue3后台管理二]首页和登录测试

1 修改main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

在这里插入图片描述

2 路由创建

import {createRouter, createWebHistory} from 'vue-router'
const routes = [
        {
    path:'/',
    redirect:'/login',

    },
    {
    path:'/login',
    name:'login',
        component:()=>import('../views/login/index.vue'),

    },
        {
    path:'/home',
    name:'home',
        component:()=>import('../views/home/index.vue'),

    },
]

const router = createRouter({
    history:createWebHistory(),
    routes:routes
    })

export default router

图片
在这里插入图片描述

3 登录

<script setup>
import {reactive} from "vue";
const obj = reactive({name:'登录'})
</script>

<template>
<h1>{{obj.name}}</h1>
</template>

<style scoped>

</style>

图片
在这里插入图片描述

4 首页

<script setup>
import {reactive} from "vue";
const obj = reactive({name:'首页'})
</script>

<template>
<h1>{{obj.name}}</h1>
</template>

<style scoped>

</style>

图片
在这里插入图片描述

5 修改App,vue

<script setup>

</script>

<template>
    <router-view></router-view>

</template>

<style scoped>

</style>

图片
在这里插入图片描述

启动测试

在这里插入图片描述

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

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

相关文章

双指针+前缀和,蓝桥云课 近似gcd

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 0近似gcd - 蓝桥云课 (lanqiao.cn) 二、解题报告 1、思路分析 考虑近似gcd的子数组的特点&#xff1a;不为g的倍数的数字个数小于等于1 我们用前缀和pre[]来存储不为g的倍数的数字个数 那么枚举左端点l&a…

计算机网络学习笔记——运输层(b站)

目录 一、 运输层概述 二、运输层端口号、复用与分用的概念 三、UDP和TCP的对比 四、TCP的流量控制 五、TCP的拥塞控制 六、TCP超时重传时间的选择 七、TCP可靠传输的实现 八、TCP报文段的首部格式 一、 运输层概述 物理层、数据链路层、网络层实现了主机到主机的通信…

Qt 基于FFmpeg的视频转换器 - 转GIF动图

Qt 基于FFmpeg的视频转换器 - 转GIF动图 引言一、设计思路二、核心源码三、参考链接 引言 gif格式的动图可以通过连续播放一系列图像或视频片段来展示动态效果&#xff0c;使信息更加生动形象&#xff0c;可以很方便的嵌入到网页或者ppt中。上图展示了视频的前几帧转为gif动图的…

大摩“凑热闹”:当前氧化铝紧平衡,任何供给冲击都将导致价格急剧波动

大摩认为&#xff0c;全球有590万吨氧化铝供应受阻&#xff0c;相等于扣除中国后全球供应约一成&#xff0c;而氧化铝需求可能有所上升&#xff0c;同时氧化铝库存缓冲有限&#xff0c;因此任何供给冲击都将导致价格急剧波动。 文章内容 今年以来氧化铝期货价格一路上行&#…

STM32-13-MPU

STM32-01-认识单片机 STM32-02-基础知识 STM32-03-HAL库 STM32-04-时钟树 STM32-05-SYSTEM文件夹 STM32-06-GPIO STM32-07-外部中断 STM32-08-串口 STM32-09-IWDG和WWDG STM32-10-定时器 STM32-11-电容触摸按键 STM32-12-OLED模块 文章目录 STM32-12-MPU1. 内存保护单元MPU1. M…

JVM之性能优化

1.JVM优化什么 由博客JVM之垃圾回收-CSDN博客我们已经了解到了数据存储是在方法区和堆区&#xff0c;而堆区的使用更为频繁。堆区有什么呢?老年代、新生代、GC。因此JVM性能优化&#xff0c;优化什么&#xff1f; 我们猜想一下&#xff0c;新生代的大小设置&#xff1b;老年代…

模型实战(22)之 C++ - tensorRT部署yolov8-cls 目标分类

C++ - tensorRT部署yolov8-cls 目标分类 在检测应用场景中如果有同等类别不同形态的目标,单纯的目标检测可能达不到实用或者想要的精度,这就需要衔接一步分类python环境下如何直接调用推理模型转换并导出:pt -> onnx ->.engineC++ tensorrt 部署分类模型1.Python环境下…

【OrangePi AIpro】香橙派 AIpro 为AI而生

产品简介 OrangePi AIpro(8T)&#xff1a;定义边缘智能新纪元的全能开发板 在当今人工智能与物联网技术融合发展的浪潮中&#xff0c;OrangePi AIpro(8T)凭借其强大的硬件配置与全面的接口设计&#xff0c;正逐步成为开发者手中的创新利器。这款开发板不仅代表了香橙派与华为…

2024最新 Jenkins + Docker实战教程(七)- Jenkins实现远程传输和自动部署

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

powershell 配合aria2实现简单的图片爬取

powershell 配合aria2实现简单的图片爬取 01 前言 现如今&#xff0c;提到爬虫&#xff0c;令人不得不提到Python&#xff0c;确实简单&#xff0c;也强大&#xff0c;到处都可以找到教程。故而今天换换口味&#xff0c;用powershell来实现&#xff0c;配合aria2的强大下载功…

鸿蒙开发接口图形图像:【@ohos.window (窗口)】

窗口 窗口提供管理窗口的一些基础能力&#xff0c;包括对当前窗口的创建、销毁、各属性设置&#xff0c;以及对各窗口间的管理调度。 该模块提供以下窗口相关的常用功能&#xff1a; [Window]&#xff1a;当前窗口实例&#xff0c;窗口管理器管理的基本单元。[WindowStage]&…

【单片机毕设选题】-智能语音控制风扇

一. 系统功能 此设计采用STM32和SU-03T离线语音模块来控制风扇, 主要功能如下: 1. 通过DHT11温湿度模块来采集环境温湿度。 2. 通过SU-03T语音模块来控制风扇启停加减速等。 3. 通过OLED显示系统状态。 4. 可以通过按键控制风扇启停加减速等。 5. 通过蓝牙模块监视系统状…

内网安全之证书模版的管理

证书模板 Certificate templates 是 CA 证书颁发机构的一个组成部分&#xff0c;是证书策略中的重要元素&#xff0c;是用于证书注册、使用和管理的一组规则和格式。当 CA 收到对证书的请求时&#xff0c;必须对该请求应用一组规则和设置&#xff0c;以执行所请求的功能&#x…

【创作活动】探索 GPT-4o:下一代语言模型的技术革命

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Thingsboard规则链:Customer Details节点详解

在物联网&#xff08;IoT&#xff09;平台Thingsboard的规则引擎体系中&#xff0c;Customer Details节点是一个功能强大的组件&#xff0c;它专为处理与客户&#xff08;Customer&#xff09;实体相关的综合信息而设计。这个节点不仅能够读取客户的基本属性&#xff0c;还能提…

VBA技术资料MF159:实现某个区域内的数据滚动

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

【微服务】springboot 构建docker镜像多模式使用详解

目录 一、前言 二、微服务常用的镜像构建方案 3.1 使用Dockerfile 3.2 使用docker plugin插件 3.3 使用docker compose 编排文件 三、环境准备 3.1 服务器 3.2 安装JDK环境 3.2.1 创建目录 3.2.2 下载安装包 3.2.3 配置环境变量 2.2.4 查看java版本 3.3 安装maven …

F. Longest Strike[双指针详解]

Longest Strike 题面翻译 给你一个长度为 n n n 的序列 a a a 和一个整数 k k k&#xff0c;你要求一个区间 [ l , r ] [l,r] [l,r] 满足&#xff1a; 对于任何整数 x ∈ [ l , r ] x∈[l,r] x∈[l,r]&#xff0c; x x x 在 a a a 中的出现次数不少于 k k k 次。最大…

【Postman接口测试】第四节.Postman接口测试项目实战(上)

文章目录 前言一、项目介绍 1.1 项目界面功能介绍 1.2 项目测试接口介绍 1.3 项目测试接口流程二、HTTP协议三、接口测试中接口规范四、项目合同新增业务介绍 4.1 登录接口调试 4.1 登录接口自动关联 4.1 添加课程接口调试 4.1 上传合同…

排序(前篇)

1.排序的概念及其运用 2.插入排序的概念及实现 3.希尔排序的概念及实现 4.选择排序概念及实现 总代码&#xff08;对比各个排序在大量的数据情况排序所化的时间&#xff09;&#xff1a; 1.排序的概念及其运用 1.1排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使…