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

Vue 3+Vite+Eectron从入门到实战系列之(二)一Elementplus及VueRouter的配置

为了后续开发方便,在没有 UI 设计师配合的情况下,让我们的界面更加美观,我们使用 elementplus 组件库,并配置路由。

删除不需要的默认文件夹及文件,src 配置如下

请添加图片描述

实现效果

请添加图片描述

安装 elementplus,vue-router

npm install element-plus --save
npm install vue-router --save
  • 在 main.js 中引入 element-plus
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus).mount('#app')
  • 创建 router 文件夹,并编写 index.js
//引入vue-router
import { createRouter, createWebHistory } from 'vue-router'//引入组件
//引入vue-router
import { createRouter, createWebHistory } from 'vue-router'//引入组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
//创建路由对象
const router = createRouter({history: createWebHistory(),routes: 

相关文章:

Vue 3+Vite+Eectron从入门到实战系列之(二)一Elementplus及VueRouter的配置

为了后续开发方便,在没有 UI 设计师配合的情况下,让我们的界面更加美观,我们使用 elementplus 组件库,并配置路由。 删除不需要的默认文件夹及文件,src 配置如下 实现效果 安装 elementplus,vue-router npm install element-plus --save npm install vue-router --save在…...

STL-list

1.list 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 2. list的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立节点中,在节点中通过指针指向其前一个元素和后一个元素。 3. l…...

2024 7.29~8.4 周报

一、上周工作 2024 7.22~7.28周报-CSDN博客 二、本周计划 修改论文 三、完成情况 3.1 论文修改 3.1.1 摘要 问题:所写问题是一般性的深度网络问题(过拟合),并没有针对FWI的问题(边缘不清晰、深层不清晰、速度慢…...

随身助手271个可用api接口网站php源码(随身助手API)

源码简介: 随身助手API,本次更新了271个可用接口,现在开源给大家使用,无后门无加密,放心使用。 {“标题”:”看图猜成语接口”,”小标题”:”随身助手API”,”地址”:”tianyi/LookIdiom.php”,”状态”:”正常”} {…...

珠江电缆,顺应全球变化,实现高质量出海

在全球经济快速变化的今天,越来越多的企业将目光投向了国际市场。特别是对于线缆行业来说,顺应全球变化、应对机遇与挑战,实现高质量出海已成为长期发展的战略目标之一。珠江电缆作为一家集研发、制造和销售为一体的大型专业电线电缆企业&…...

redis面试(四)持久化

什么是持久化? 由于redis是基于内存操作的轻量型数据库,所以如果发生宕机重启这种事情,存储的数据就会直接丢失,如果在里面存储了没有备份的数据,那么确实会对我们的业务造成一定影响。 所以我们要通过持久化的手段&a…...

构建数据桥梁:Pandas如何简化API到DataFrame的转换

在数据科学的广阔天地中,API如同一把钥匙,为我们打开了通往丰富数据资源的大门。无论是追踪最新的股市动态,还是分析社交媒体趋势,API都能提供我们需要的实时数据。今天,我们将一起探索如何利用Python的pandas库&#…...

echarts制作grafana 面板之折线图

最近有需求需要制作grafana 来实现自己的需求,于是开始研究 实现效果如下 实现代码 import * as echarts from echarts;var chartDom document.getElementById(main); var myChart echarts.init(chartDom, dark); var option;function getLast30Days() {let da…...

技术男的审美反击:UI配置化新纪元

之前常常被甲方的领导说,我们全是一群钢铁直男,一点不懂审美,其实我们心里边想的 “您说得对啊!!!!” 这个可能和理工科有关系吧,理工男好像都差不多,所以这次我们就把很…...

73.结构体指针参数传递

目录 一.结构体指针参数传递 二.视频教程 一.结构体指针参数传递 结构体指针也可以作为参数传递&#xff0c;相对于结构体变量参数传递&#xff0c;结构体指针变量作为函数参数传递速度更快&#xff0c;效率更高。 举例&#xff1a; #include <stdio.h> #include <…...

面向对象编程与Scala:掌握核心概念与应用

面向对象编程与Scala&#xff1a;掌握核心概念与应用 1. 引言 Scala 是一种融合了面向对象编程&#xff08;OOP&#xff09;和函数式编程&#xff08;FP&#xff09;特性的编程语言。它为开发者提供了强大的工具来创建高效且灵活的软件。面向对象编程是一种编程范式&#xff…...

《Advanced RAG》-07-探索 RAG 中表格数据的处理方案

摘要 本文详细讨论了实现 Retrieval-Augmented Generation&#xff08;RAG&#xff09;时对表格进行处理的挑战&#xff0c;特别是在非结构化文档中自动准确地提取和理解表格信息。 首先介绍了RAG中管理表格的关键技术&#xff0c;包括表格解析和索引结构设计。 接着&#xff0…...

Dubbo源码深度解析(二)

接着《Dubbo源码深度解析(一)》继续讲&#xff0c;上篇博客主要讲Dubbo提供的三个注解的作用&#xff0c;即&#xff1a;EnableDubbo、DubboComponentScan、EnableDubboConfig。其中后两个注解是在EnableDubbo上的&#xff0c;因此在启动类上加上EnableDubbo注解&#xff0c;等…...

RocketMQ 的高可用性:主从复制与多副本保证

RocketMQ 是一款开源的分布式消息队列系统&#xff0c;广泛应用于大规模分布式应用中。高可用性是 RocketMQ 的核心特性之一&#xff0c;通过主从复制和多副本保证&#xff0c;RocketMQ 能够确保消息的可靠传递和系统的高可用性。 什么是高可用性&#xff1f; 高可用性&#…...

Linux系统驱动(四)自动创建设备节点

自动创建设备节点 &#xff08;一&#xff09;创建设备节点的机制 1. mknod 将驱动编译到内核中&#xff0c;在内核启动时驱动自动被安装执行 2.devfs&#xff08;2.4内核&#xff09; 3. udev&#xff08;2.6内核至今&#xff09; 注&#xff1a;hotplug — 热插拔 &…...

Webpack、Vite区别知多少?

前端的项目打包&#xff0c;我们常用的构建工具有Webpack和Vite&#xff0c;那么Webpack和Vite是两种不同的前端构建工具,那么你们又是否了解它们的区别呢&#xff1f;我们在做项目时要如何选择呢&#xff1f; 一、工具定义 1、Webpack&#xff1a;是一个强大的静态模块打包工…...

《剑指编程之巅:大学新生,以诗心驭代码》

《剑指编程之巅&#xff1a;大学新生&#xff0c;以诗心驭代码》 月华如水&#xff0c;洒落书窗&#xff0c;吾辈学子&#xff0c;正逢盛世&#xff0c;编程之术&#xff0c;已成必修之课。然则&#xff0c;编程语言如繁星点点&#xff0c;学习资源浩瀚如海&#xff0c;新生初…...

【八股文】网络基础

1.简述一下TCP和UDP的区别&#xff1f; 特性TCP&#xff08;Transmission Control Protocol&#xff09;UDP&#xff08;User Datagram Protocol&#xff09;连接类型面向连接&#xff0c;需要建立三次握手连接无连接&#xff0c;发送数据无需建立连接数据传输提供可靠的数据传…...

Nginx进阶-常见配置(一)

一、nginx Proxy 反向代理 1、代理原理 反向代理产生的背景&#xff1a; 在计算机世界里&#xff0c;由于单个服务器的处理客户端&#xff08;用户&#xff09;请求能力有一个极限&#xff0c;当用户的接入请求蜂拥而入时&#xff0c;会造成服务器忙不过来的局面&#xff0c…...

九/十:C语言-扫雷游戏实现与函数递归

九&#xff1a;数组和函数实践&#xff1a;扫雷游戏 1.扫雷游戏的分析和设计 &#xff08;1&#xff09;扫雷游戏功能说明&#xff1a; 使用控制台实现经典的扫雷游戏游戏可以通过菜单实现暂停或者退出游戏扫雷的游戏界面是9*9的格子默认随机布置10个雷可以排查雷&#xff1…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...