Element Plus组件库使用组件自动导入后样式不生效的问题

news2024/12/23 18:22:03

首先按照官方文档上的介绍进行配置:快速开始 | Element Plus (element-plus.org)

 配置完成后,去组件中去测试组件库中的button组件的样式是否生效

<template>
  <el-button type="primary">Primary</el-button>
</template>

然后运行代码查看效果

由此可以看出虽然按照官网上的步骤进行配置了,但是样式并没有因此而生效 。

错误原因:是因为在使用以下命令进行依赖的安装的时候默认安装的是最新版的

yarn add -D unplugin-vue-components unplugin-auto-import

安装的版本为

"devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "unplugin-auto-import": "^0.17.6",
    "unplugin-vue-components": "^0.27.0",
    "vite": "^5.2.0"
}

 所以只需要将 unplugin-vue-components 的版本安装为0.26.0即可

yarn remove unplugin-vue-components

yarn add unplugin-vue-components@0.26.0

然后重新运行项目查看结果

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

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

相关文章

windows和linux下分别安装pwntools

inux下安装pwntools pwntools是pwn最常用的一个python包。 首先需要安装pip&#xff1a;apt install python3-pip 然后安装pwntools&#xff1a;pip install pwntools 完成 10-1windows下安装pwntools 首先可以先安装好python的环境&#xff0c;Python 2.7.9 或 Python 3.4…

期权(1):基本概念,权利金,定金,买方,卖方,零和游戏,对赌协议

期权是合约&#xff0c;权利金就是定金&#xff01; 合约到期时 买方可以选择行权&#xff0c;也可以选择不行权。代价就是定金损失。因此亏损封顶&#xff0c;但盈利无限。卖方赚的就是买方的定金&#xff0c;盈利封顶&#xff0c;但亏损无限。 从这里&#xff0c;我们看出…

5.9网络协议

由网卡发送数据通过网线进行发送&#xff0c;当网卡接收到信号以后将数据传给内核数据区&#xff0c;然后由操作系统交给相应的进程。 将数据进行发送的时候需要借助于网线实现&#xff0c;这个时候会出现当传输的数据比较远的时候就借助于中继器将信号进行再生扩大&#xff0…

python如何做一个服务器fastapi 和flask

用 fastapi 方式的话 from fastapi import FastAPIapp FastAPI()app.get("/api") def index():return "hello world"然后需要安装 uvicorn 并执行下面的命令 uvicorn server:app --port 8000 --reload最终 如果是用 flask 直接写下面的代码 # -*- cod…

FullCalendar日历组件集成实战(4)

背景 有一些应用系统或应用功能&#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件&#xff0c;但功能比较简单&#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示&#xff0c;以及互动操作如通过点击添加事件&#xff0…

Python GUI开发- PyQt5 开发小工具环境入门

前言 常见的python开发gui的库有 Tkinter&#xff0c; PyQt5&#xff0c; wxPython等。本教程是选择PyQt5 开发桌面小工具。 环境准备 只需pip安装即可快速准备好开发环境 pip install pyqt5快速开始 创建一个空的window窗口 Qapplication()&#xff1a;每个GUI都必须包含…

图片转base64【Vue + 纯Html】

1.template <el-form-item label"图片"><div class"image-upload-container"><input type"file" id"imageUpload" class"image-upload" change"convertToBase64" /><label for"imageU…

LabVIEW静止无功补偿监控系统

LabVIEW静止无功补偿监控系统 随着电力系统和电力电子技术的快速发展&#xff0c;静止无功补偿器作为提高电网质量和稳定性的关键设备&#xff0c;其监控系统的研发显得非常重要。详细介绍基于LabVIEW的SVC监控系统的设计与实现过程&#xff0c;可为电力系统的优化和电力电子技…

电机控制系列模块解析(21)—— 弱磁控制

一、弱磁控制 常用的FW即弱磁控制方法一般为&#xff1a;电压外环控制、单个电流环控制、直接输出电压幅值分配控制、输出电压角度PI控制、不弱磁控制、直接解析解、查表、速度反比例曲线拟合等等。 弱磁控制相关因素&#xff1a;过调制&#xff08;母线电压的剧烈波动&#x…

(十)Python基础练习题一(50道选择题)#Python

本文整理了Python基础知识相关的练习题&#xff0c;共50道&#xff0c;适用于刚入门初级Python想巩固基础的同学。来源&#xff1a;如荷学数据科学题库&#xff08;技术专项-Python一&#xff09;。 1&#xff09; 2&#xff09; 3&#xff09; 4&#xff09; 5&#xff09; 6…

【C语言每日题解】三题:回文检查、刘备 关羽 张飞三人过年放鞭炮、约瑟夫环问题(犹太人死亡游戏)(难度up,推荐)

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f308;感谢大家的阅读、点赞、收藏和关注 &#x1f970;希望大家喜欢我本次的讲解 &#x1f31f;非常推荐最后一道题 &#x1f339; 犹太人死亡游戏&#xff0c;建议观看 &…

html--地图

<!DOCTYPE html> <html lang"en"> <head><meta charset"utf-8"><title>ECharts</title><!--Step:1 引入一个模块加载器&#xff0c;如esl.js或者require.js--><script src"js/esl.js"></scr…

RGMII基于V2.0规范解读

一、说明 RGMII&#xff08;Reduced Gigabit Media Independent Interface&#xff09;是Reduced GMII&#xff08;吉比特介质独立接口&#xff09;&#xff0c;旨在替代IEEE802.3u MII、IEEE802.3z GMII和TBI。主要目标是将MAC和PHY互连所需的引脚数量从最大28个引脚&#xf…

数据库原理与应用实验八 存储过程

目录 实验目的和要求 实验环境 实验内容与过程 实验内容&#xff1a; 操作过程&#xff1a; 实验目的和要求 熟悉存储过程的定义和使用&#xff0c;熟练运用 select ,update ,insert ,delete 命令完成对学生信息数据库的查询、更新、添加、删除操作。 实验环境 Windo…

k8s的整体架构及其内部工作原理,以及创建一个pod的原理

一、k8s整体架构 二、k8s的作用&#xff0c;为什么要用k8s&#xff0c;以及服务器的发展历程 1、服务器&#xff1a;缺点容易浪费资源&#xff0c;且每个服务器都要装系统&#xff0c;且扩展迁移成本高 2、虚拟机很好地解决了服务器浪费资源的缺点&#xff0c;且部署快&#x…

【从零开始学习Redis | 第十一篇】快速介绍Redis持久化策略

前言&#xff1a; Redis 作为一种快速、高效的内存数据库&#xff0c;被广泛应用于缓存、消息队列、会话存储等场景。然而&#xff0c;由于其特性是基于内存的&#xff0c;一旦服务器进程退出&#xff0c;内存中的数据就会丢失。为了解决这一问题&#xff0c;Redis 提供了持久…

删除表空间

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 当某个表空间中的数据不再需要时&#xff0c;或者新创建的表空间不符合要求时&#xff0c;可以考虑删除这个表空间。若要删除表空间&#xff0c;则需要用户具有 DROP TABLESP…

【C++】认识C++(上)

目录 从C到C命名空间同名冲突命名空间的定义命名空间的使用 C的输入和输出缺省参数&#xff08;默认参数&#xff09; 从C到C C语言的出现是计算机科学和工程史上的一个重要里程碑&#xff0c;许多现代计算机语言都受C语言的影响。C语言是面向过程的&#xff0c;结构化和模块化…

社交媒体数据恢复:皮皮搞笑

一、数据恢复前的准备 在开始数据恢复之前&#xff0c;请确保您已经完成了以下准备工作&#xff1a; 确认您具有管理员权限&#xff0c;以便在操作过程中避免不必要的错误。 确保您的设备电量充足&#xff0c;以免在数据恢复过程中因电量不足而导致数据丢失。 如果您需要恢复…