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

vue3配置element-ui的使用

news 来源：原创 2025/7/18 13:13:00

今天阐述一下如何在vue中进行配置使用element-ui；

一，配置下载Element

1.首页在电脑上下载好vue，以及npm，可以去相关的官方进行下载。
2.进行配置命令

npm install element-plus --save

如报错：

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: vue3_cli_default@0.0.0
npm error Found: vue@3.5.13
npm error node_modules/vue
npm error   vue@"^3.2.8" from the root project
npm error
npm error Could not resolve dependency:
npm error peer vue@"^2.5.17" from element-ui@2.15.14
npm error node_modules/element-ui
npm error   element-ui@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/rnd/.npm/_logs/2025-05-12T02_23_38_037Z-eresolve-report.txtnpm error A complete log of this run can be found in: /Users/rnd/.npm/_logs/2025-05-12T02_23_38_037Z-debug-0.log

先删除npm uninstall element-ui，运行：

npm uninstall element-ui

再次运行npm install element-plus --save进行安装element

二：在项目的main.js配置全局

import { createApp } from 'vue'
import App from './App.vue'// 引入 Element Plus 和它的样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)// 使用 Element Plus 插件
app.use(ElementPlus)app.mount('#app')

or或者

import App from './App'// 引入 Element Plus 和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import {createSSRApp
} from 'vue'
export function createApp() {const app = createSSRApp(App)// 使用 Element Plus 插件app.use(ElementPlus)return {app}
}
// #endif

三：使用与调用Element-UI组件

index.vue中：

<template><view class="content"><el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch></view>
</template><script>export default {data() {return {value: true}},onLoad() {},methods: {}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}
</style>

或者在app.vue中：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import Time from './components/Time.vue'
</script><template><HelloWorld/><Time/>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

HelloWorld组件如下：

<template><el-switchv-model="value1"active-text="按月付费"inactive-text="按年付费"></el-switch><el-switchstyle="display: block"v-model="value2"active-color="#13ce66"inactive-color="#ff4949"active-text="按月付费"inactive-text="按年付费"></el-switch>
</template>
<script>export default {data() {return {value1: true,value2: true}}};
</script>

Time组件如下：

<template>
<el-time-selectv-model="value":picker-options="{start: '08:30',step: '00:15',end: '18:30'}"placeholder="选择时间">
</el-time-select>
</template>
<script>export default {data() {return {value: ''};}}
</script>

此时运行，看结果

在这里插入图片描述

大功告成，继续加油！

vue3配置element-ui的使用

今天阐述一下如何在vue中进行配置使用element-ui； 一，配置下载Element 1.首页在电脑上下载好vue，以及npm，可以去相关的官方进行下载。 2.进行配置命令 npm install element-plus --save如报错： npm error code ERE…...

编程日记 2025/7/18 13:13:00

39-绘制渐变的文字

39-绘制渐变的文字_哔哩哔哩_bilibili39-绘制渐变的文字是一次性学会 Canvas 动画绘图（核心精讲50个案例）2023最新教程的第40集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibi…...

编程日记 2025/7/19 0:45:47

HBase进阶之路：从原理到实战的深度探索

目录一、HBase 核心概念再梳理 1.1 RowKey 1.2 Column Family 1.3 Region 二、架构与运行机制剖析 2.1 架构组件详解 2.1.1 Client 2.1.2 Zookeeper 2.1.3 Master 2.1.4 RegionServer 2.1.5 HDFS 2.2 数据读写流程深度解析 2.2.1 数据写入流程 2.2.2 数据读取流…...

编程日记 2025/7/16 12:24:41

使用 AddressSanitizer 检测栈内存越界错误

一、概述在 C/C 编程中，栈内存越界是一种常见而危险的内存错误，通常发生在局部变量数组被访问时索引越界。由于栈空间的结构特点，越界写入可能覆盖返回地址或其他局部变量，导致不可预测的行为甚至程序崩溃。传统的调试手段难以定…...

编程日记 2025/7/18 12:32:21

【技巧】离线安装docker镜像的方法

回到目录【技巧】离线安装docker镜像的方法 0. 为什么需要离线安装？ 第一、由于docker hub被墙，所以拉取镜像需要配置国内镜像源第二、有一些特殊行业服务器无法接入互联网，需要手工安装镜像 1. 可以正常拉取镜像服务器操作服务器…...

编程日记 2025/7/19 0:54:01

vue实现与后台springboot传递数据【传值/取值 Axios 】

vue实现与后台springboot传递数据【传值/取值】提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每…...

编程日记 2025/7/19 0:45:47

Git日志信息

Git日志信息 1. log log 命令用于查看 git 的各种日志信息，在使用 log 后，git 会进入 vim 模式，此时退出日志模式需要按下 q 键。可以通过小箭头来浏览未显示出来的内容。 1.1 查看日志信息 git log git log --prettyoneline #美观输出日…...

编程日记 2025/7/13 20:17:52

Linux操作系统从入门到实战（六）Linux开发工具（上）详细介绍什么是软件包管理器，Linux下如何进行软件和软件包的安装、升级与卸载

Linux操作系统从入门到实战（六）Linux开发工具（上）详细介绍什么是软件包管理器，Linux下如何进行软件和软件包的安装、升级与卸载前言一、软件包管理器1.1 传统安装方式的麻烦：从源代码说起1.2 软件包&…...

编程日记 2025/7/19 0:51:35

Java中的策略模式和模板方法模式

文章目录 1. 策略模式（Strategy Pattern）案例：支付方式选择 2. 模板方法模式（Template Method Pattern）案例：制作饮料流程 3. 策略模式 vs 模板方法模式4.总结在Java中，策略模式和模板方法模式…...

编程日记 2025/7/19 0:46:59

C#里WPF使用触发器实现鼠标点击响应

在WPF里创建了一个自定义的用户控件，要想在这个控件里实现鼠标的点击事件响应，就需要添加事件触发器交互定义，如下代码： <ListView x:Name="ListViewMenu" ItemsSource="{Binding Path=SubItems}" Foreground="White" ScrollViewer.Ho…...

编程日记 2025/7/19 0:58:26

python3.8~3.12安装tensorflow-cpu 准备创建并进入目录 mkdir tf-cpu cd tf-cpu编写测试代码 test_tensorflow.py import tensorflow as tf# 检查TensorFlow版本 print("\nTensorFlow version:", tf.__version__,end\n\n)# 创建一个简单的计算图并运行它 tensor …...

编程日记 2025/7/19 0:57:32

【AI提示词】PEST分析

提示说明市场分析师专注于为企业、产品或国家提供PEST分析支持，以制定精准的市场战略。提示词 # Role: PEST分析## Profile - language: 中文 - description: 市场分析师专注于为企业、产品或国家提供PEST分析支持，以制定精准的市场战略 - backgrou…...

编程日记 2025/7/15 1:37:32

42、在.NET 中能够将⾮静态的⽅法覆写成静态⽅法吗？

在.NET中，不能将非静态方法（实例方法）直接覆写（Override）为静态方法（Static Method）。以下是关键原因和解释： 1. 方法绑定的本质区别实例方法：属于对象的实例&#xf…...

编程日记 2025/7/19 0:58:27

【嵌入式系统设计师（软考中级）】第三章：嵌入式系统软件基础知识——①软件及操作系统基础

文章目录 1. 嵌入式系统软件基础知识1.1 嵌入式软件分类1.2 嵌入式系统初始化1.3 无操作系统支持的嵌入式软件体系结构1.4 有操作系统支持的嵌入式软件体系结构1.5 嵌入式支撑软件 2. 嵌入式操作系统基础知识2.1 嵌入式操作系统基本概念2.2 处理器管理2.2.1 多道程序2.2.2 分区…...

编程日记 2025/7/19 0:48:24

cs224w课程学习笔记-第11课

cs224w课程学习笔记-第11课知识图谱嵌入前言一、知识图谱1、知识图谱特点2、关系类型二、知识图谱嵌入1、嵌入核心思想2、嵌入模型2.1 嵌入模型transE1)、核心思想2)、训练步骤3)、模型表征能力 2.2 嵌入模型TransR2.3 DistMult嵌入模型1)、核心思想2)、表征能力 2.4 complE…...

编程日记 2025/7/19 0:56:20

5.10-套接字通信 - C++

套接字通信 1.1 通信效率问题服务器端单线程 / 单进程无法使用，不支持多客户端多线程 / 多进程写程序优先考虑多线程：什么时候考虑多进程？ 启动了一个可执行程序 A ，要在 A 中启动一个可执行程序 B 支持多客户端连接 IO 多…...

编程日记 2025/7/19 0:59:25

【Linux】Linux内核的网络协议之socket理解

1. Socket（套接字） 的本质它是应用程序与网络协议栈之间的编程接口（API），用于实现网络通信。 Socket 并不是一个物理设备，而是一个抽象层为应用程序提供统一的网络操作接口（如 send()、recv()…...

编程日记 2025/7/16 18:06:03

仿函数和函数对象

1. 概念解读：什么是“函数”和“函数对象”？ 核心概念一句话总结仿函数（Functor） 函数对象（Function Object） 它们本质是一个对象（Object），但可以像函数（Fu…...

编程日记 2025/7/18 14:51:17

Kubernetes控制平面组件：Kubelet 之 Static 静态 Pod

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2025/7/18 18:29:45

Django 项目的 models 目录中，init.py 文件的作用

在 Django 项目的models/init.py文件中，这些导入语句的主要作用是将各个模型类从不同的模块中导入到models包的命名空间中。这样做有以下几个目的： 简化导入路径当你需要在项目的其他地方使用这些模型时，可以直接从models包导入&#xff0c…...

编程日记 2025/7/19 0:46:58

学习日志04 java

PTA上的练习复盘 java01 编程题作业感悟： 可以用ai指导自己怎么调试，但是不要把调代码这过程里面的精华交给ai，就是自己去修正错误不能让ai代劳！~~~ 1 scanner.close() Scanner *** new Scanner(System.in); ***.close(); …...

编程日记 2025/7/19 0:54:58

vue-pdf-embed预览PDF

一、vue-pdf-embed 链接：Yarn 1、安装插件 npm install vue-pdf-embed 2、文件中引入（分页效果已实现，样式请自行修改） <template><div class"download-pdf-preview" style"height: 450px; border:1…...

编程日记 2025/7/14 8:37:29

C++GO语言微服务之Dockerfile docker-compose

目录 01 01-知识点概述 02 02-dockerfile复习 03 03-环境变量ENV的使用 04 04-WORKDIR的使用 05 05-USER和ARG的使用 06 06-ONBUILD的使用 07 07-dockerfile的缓存相关的参数 08 08-dockerfile的编写 09 09-测试-没成功-好像是网不行 01 10-docker-compose介绍 02 11…...

编程日记 2025/7/13 17:08:02

【漫话机器学习系列】255.独立同分布（Independent and Identically Distributed，简称 IID）

深入理解独立同分布（IID）：机器学习与统计学的基石在机器学习、深度学习、统计建模等领域，我们经常会遇到一个重要假设：独立同分布（Independent and Identically Distributed，简称 IID&#xf…...

编程日记 2025/7/14 9:32:43

树莓派4 yolo 11l.pt性能优化后的版本

树莓派4 使用 Picamera2 拍摄图像，然后通过 YOLO11l.pt 进行目标检测，并在实时视频流中显示结果。但当前的代码在运行时可能会比较卡顿，主要原因包括： picam2.capture_array() 是一个较慢的操作；YOLO 推理可能耗时较长…...

编程日记 2025/7/13 1:12:39

AD22 快速定义PCB板框与DXF导入定义

自行定义板框 1. 初步评估：选中所有的器件，选中‘在矩形区域排列’ 将元件放好后，可以再将元件紧凑一下 2. 设置原点，并在下方选中机械一层从原点出发，点击快捷键PL 画框线 3. 对线条长度取整，且最好是5…...

编程日记 2025/7/14 1:21:17

LInux系统文件与目录管理（二）

提示：第二部分对第一部分收尾文章目录常见的命令如下一、文件查看命令1. more命令2.less命令3.head命令4.tail命令5.nl命令（了解）6.创建目录命令7.创建文件命令>: 覆盖重定向>>: 追加重定向 8.touch命令9.echo命令10.文件或目录复…...

编程日记 2025/7/13 1:35:55

Redisson在业务处理中失败后的应对策略：保障分布式系统的可靠性

分布式系统中的数据一致性与高可用性一直是开发者面临的难题。作为Redis官方推荐的Java客户端，Redisson凭借其强大的分布式能力成为解决这些问题的利器。但在实际业务场景中，网络抖动、资源竞争、节点故障等问题可能导致操作失败，本文将深入探…...

编程日记 2025/7/16 23:55:46

windows下docker 运行 ros2humble arm64

目前要想运行arm版ros humble 目前最好的解决方案是使用qemu模拟。 1.拉取 ubuntu22.04 docker pull ubuntu:22.04 --platformarm642.安装小鱼ros2 humble wget http://fishros.com/install -O fishros && . fishros3.安装eqmu docker run --rm --privileged multia…...

编程日记 2025/7/13 6:26:38

表的增删改查 -- 2

目录 3、查询（R） 3.7、条件查询：where 3.8、分页查询：limit 3.9、查询总结 4、修改（U） 5、删除（D） 3、查询（R） 3.7、条件查询：where selec…...

编程日记 2025/7/18 12:02:48

Linux系统管理与编程20：Apache

兰生幽谷，不为莫服而不芳； 君子行义，不为莫知而止休。做好网络和yum配置，用前面dns规划的www的IP进行。 #!/bin/bash #----------------------------------------------------------- # File Name: myWeb.sh # Version: 1.0 # …...

编程日记 2025/7/17 7:44:53

dfs 第一次加训详解下

目录 P1706 全排列问题思路 B3618 寻找团伙思路 B3621 枚举元组思路 B3622 枚举子集（递归实现指数型枚举） 思路 B3623 枚举排列（递归实现排列型枚举） B3625 迷宫寻路思路 P6183 [USACO10MAR] The Rock Game S 总结…...

编程日记 2025/7/18 16:10:53

vue2/3 中使用 @vue-office/docx 在网页中预览(docx、excel、pdf)文件

1. 安装依赖： #docx文档预览组件npm install vue-office/docx vue-demi0.14.6#excel文档预览组件npm install vue-office/excel vue-demi0.14.6#pdf文档预览组件npm install vue-office/pdf vue-demi0.14.6 vue2.6版本或以下还需要额外安装 vue/composition-api …...

编程日记 2025/7/18 7:54:05

Excel表的导入与导出

Excel表的导入与导出根据excel表来建立所需的数据库表格 <dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.10.3</version></dependency><dependency><groupId>cn.hutool&…...

编程日记 2025/7/18 1:14:58

Redis 中常见的数据类型有哪些？

Redis 常见的数据类型包括 5 种基础类型（String、Hash、List、Set、Zset）和 3 种特殊类型（HyperLogLog、Bitmap、Geospatial）。以下是详细说明： 一、5 种基础数据类型 1. 字符串（String） 特点…...

编程日记 2025/7/14 1:33:27

消息队列如何保证消息可靠性（kafka以及RabbitMQ）

目录 RabbitMQ保证消息可靠性生产者丢失消息 MQ丢失消息消费端丢失了数据 Kakfa的消息可靠性生产者的消息可靠性 Kakfa的消息可靠性消费者的消息可靠性 RabbitMQ保证消息可靠性生产者丢失消息 1.事务消息保证生产者在发送消息之前，开启事务消息随后生…...

编程日记 2025/7/14 8:32:53

基于STM32、HAL库的BMP390L气压传感器驱动程序设计

一、简介： BMP390L 是 Bosch Sensortec 生产的一款高精度气压传感器，专为需要精确测量气压和海拔高度的应用场景设计。BMP390L 具有更低的功耗、更高的精度和更快的响应速度。二、硬件接口： BMP390L 引脚STM32L4XX 引脚说明VDD3.3V电源GNDGND地SCLPB6 (I2C1 SCL)I2C 时钟线…...

编程日记 2025/7/17 18:57:29

QMK键盘固件中LED锁定指示灯的配置与使用详解（实操部分+拓展）

QMK键盘固件中LED锁定指示灯的配置与使用详解大家好！今天就跟大家一起探索QMK固件中LED锁定指示灯的配置与使用。无论你是键盘DIY新手还是老司机，相信这篇教程都能帮你解锁新技能！一、基础配置：定义LED引脚在QMK固件中配置LED锁定指示灯非常简单，只需在config.h文件…...

编程日记 2025/7/14 1:29:18

【日撸 Java 三百行】Day 12（顺序表（二））

目录 Day 12：顺序表（二） 一、顺序表的方法 1. 顺序查找拓展：顺序查找中的哨兵思想 2. 插入 3. 删除二、代码及测试拓展： 小结 Day 12：顺序表（二） Task： 今天…...

编程日记 2025/7/14 14:54:29

Python爬虫实战：研究ajax异步渲染加密

一、引言在当今数字化时代，数据已成为推动各行业发展的核心驱动力。网络爬虫作为一种高效的数据采集工具，能够从互联网上自动获取大量有价值的信息。然而，随着 Web 技术的不断发展，越来越多的网站采用了 AJAX（Asynchronous JavaScript and XML）异步渲染技术来提升用户体…...

编程日记 2025/7/18 5:33:08

Golang企业级商城高并发微服务实战

Golang企业级商城高并发微服务实战包含内容介绍： 从零开始讲了百万级单体高并发架构、千万级微服务架构，其中包含Rpc实现微服务、微服务的跨语言调用jsonrpc和protobuf、protobuf的安装、protobuf高级语法、protobuf结合Grpc实现微服务实战、微服务服务…...

编程日记 2025/7/17 13:41:35

从经典力扣题发掘DFS与记忆化搜索的本质 -从矩阵最长递增路径入手一步步探究dfs思维优化与编程深度思考

1引子： DFS和递归法的一道经典例题矩阵最长递增子序列这个题写完之后脑袋产生了许多突发奇想： 1 第一个堆栈代码段这些底层C语言内部管理的工具它是怎么进行内存分配的？能不能深究？ 2 第二个这个DFS和计划数组存储的思路到底抽象…...

编程日记 2025/7/15 12:29:23

我开源了一个免费在线工具！UIED Tools

UIED Tools - 免费在线工具集合最近更新：修改了文档说明，优化了项目结构介绍这是设计师转开发的第一个开源项目，bug和代码规范可能有些欠缺。这是一个功能丰富的免费在线工具集合网站，集成了多种实用工具，包括 AI …...

编程日记 2025/7/12 20:10:45

geoserver发布arcgis瓦片地图服务（最新版本）

第一步：下载geoserver服务，进入bin目录启动需要提前安装好JDK环境，1.8及以上版本安装完成，页面访问端口，进入控制台界面,默认用户名密码admin/geoserver 第二步：下载地图破解版全能电子地图下载器&…...

编程日记 2025/7/18 13:58:04

RN 鸿蒙混合开发实践(踩坑)

#三方框架# #React Native # 1 。环境配置； 安装 DevEco 开发工具； Node 版本16； hdc环境配置 hdc 是 OpenHarmony 为开发人员提供的用于调试的命令行工具，鸿蒙 React Native 工程使用 hdc 进行真机调试。hdc 工具通过 OpenHa…...

编程日记 2025/7/18 20:51:52

2025年阿里云ACP大数据分析师认证模拟试题（附答案解析）

这篇文章的内容是阿里云ACP大数据分析师认证考试的模拟试题。所有模拟试题由AI自动生成，主要为了练习和巩固知识，并非所谓的 “题库”，考试中如果出现同样试题那真是纯属巧合。 1、ABC公司现有大量的图片和视频信息，以下哪种产…...

编程日记 2025/7/13 8:13:13

go语言实现IP归属地查询

效果: 实现代码main.go package mainimport ("encoding/json""fmt""io/ioutil""net/http""os" )type AreaData struct {Continent string json:"continent"Country string json:"country"ZipCode …...

编程日记 2025/7/17 4:32:01