当前位置: 首页 > 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…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...