ruoyi-plus使用Statistic统计组件升级element-plus

原本使用的就是gitee上lionli的ruoyi-plus版本的代码。但是在使用过程中作首页数据看板时想使用elementui的Statistic统计组件。结果在浏览器控制台报错找不到组件el-statistic

于是查看elementui的历史版本,发现是在新版中才有这个组件,旧版本是没这个组件的。然后在前端中查看package.json文件中的elementui的版本号,发现果然是旧版。

原element-plus版本号"element-plus": "^2.1.8",

于是升级element-plus到最新版。

 "element-plus": "^2.4.2",

仅作记录,修改如下:

首先修改package.json文件中的dependencies下的element-plus版本号

        "element-plus": "^2.4.2",

第二步,因为我是直接将另一台电脑的工程文件复制到的现在的电脑上,所以我为了避免出现莫名其妙的问题,直接将node_modules整个前端依赖删除了。之后以管理员身份进入到vue路径下,执行npm install重新进行依赖安装。

同时进入到文件vite.config.js中修改defineConfig下的plugins的内容,将红框中的添加上去。

然后进入到前端包执行npm run dev,报错

failed to load config from E:\ideaWorkSpace\ha-erp-vue\vite.config.js
error when starting dev server:                                                 
Error: Cannot find module 'unplugin-auto-import/vite' 

缺少了依赖,于是再次进入目录执行命令安装对应依赖:

npm install -D unplugin-vue-components unplugin-auto-import
或者
yarn add unplugin-vue-components unplugin-auto-import -D

安装完以后再次运行,报错

Internal server error: No known conditions for "./lib/locale/lang/zh-cn" entry in "element-plus" package
  Plugin: vite:import-analysis
  File: E:/ideaWorkSpace/ha-erp-vue/src/main.js
      at bail (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:38597:8)
      at resolve (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:38669:9)
      at resolveExports (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:40982:12)
      at resolveDeepImport (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:41000:31)
      at tryNodeResolve (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:40773:20)
      at Context.resolveId (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:40581:28)
      at async Object.resolveId (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:39254:32)
      at async TransformContext.resolve (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:39028:23)
      at async normalizeUrl (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:58348:34)
      at async TransformContext.transform (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:58503:57)
      at async Object.transform (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:39317:30)
      at async doTransform (E:\ideaWorkSpace\ha-erp-vue\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:50037:29)

这个应该是因为升级了element-plus版本导致的错误,

主要是element-plus默认为英文,在设置中文的时候报了错

将这块内容修改如下

import locale from "element-plus/es/locale/lang/zh-cn";

升级完毕,统计组件可正常使用,不再报错找不到组件el-statistic


 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Leetcode每日一题】mid——6. N 字形变换

题目描述 https://leetcode.cn/problems/zigzag-conversion/description/ 将一个给定字符串 s 根据给定的行数 numRows ,以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时,排列如下: 之后&#xff0…

成为AI产品经理——模型构建过程(上)

目录 一、背景 1.对内 2.对外 二、模型构建过程 1.模型设计 2.特征工程 ① 数据清洗 ② 特征提取 数值型数据 标签/描述类数据特征 非结构化数据(处理文本特征) 网络关系型数据 ③ 特征选择 ④ 训练集/测试集 一、背景 虽然产品经理不…

【一文搞定】在Docker中搭建centos7远程桌面环境(Xfce、Gnome两种方式)

目录 前言一、基于GNOME构建远程桌面二、基于Xfce构建远程桌面(轻量级) 前言 本文提供两种安装方式,均自己测试过,最后还是选择了Xfce,因为它比较轻量级,占用资源较少。大家也可以都试试,比较感…

致远M3 反序列化RCE漏洞复现(XVE-2023-24878)

0x01 产品简介 M3移动办公是致远互联打造的一站式智能工作平台,提供全方位的企业移动业务管理,致力于构建以人为中心的智能化移动应用场景,促进人员工作积极性和创造力,提升企业效率和效能,是为企业量身定制的移动智慧…

2023-11-23 LeetCode每日一题(HTML 实体解析器)

2023-11-23每日一题 一、题目编号 1410. HTML 实体解析器二、题目链接 点击跳转到题目位置 三、题目描述 「HTML 实体解析器」 是一种特殊的解析器,它将 HTML 代码作为输入,并用字符本身替换掉所有这些特殊的字符实体。 HTML 里这些特殊字符和它们…

HTTPS攻击怎么防御?

HTTPS 简介 超文本传输安全协议( HTTPS )是一种通过计算机网络进行安全通信的传输协议。HTTPS 经由 HTTP 进行通信,但利用 SSL/TLS 来加密数据包。 HTTPS 开发的主要目的,是提供对网站服务器的身份认证,保护交换数据的…

美国大学陪读签证申请条件是什么?

美国大学陪读签证是留学生的家庭成员在美国陪同留学生就读期间的签证类型。申请该签证需要满足一定的条件,这些条件通常包括: 1.申请人身份关系证明:申请人必须是留学生的家庭成员,如配偶或子女,需要提供证明文件&…

接口自动化测试难点:数据库验证解决方案!

接口自动化中的数据库验证:确保数据的一致性和准确性 接口自动化测试是现代软件开发中不可或缺的一环,而数据库验证则是确保接口返回数据与数据库中的数据一致性的重要步骤。本文将介绍接口自动化中的数据库验证的原理、步骤以及示例代码,帮…

CSS特效017:球体涨水的效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS…

〖大前端 - 基础入门三大核心之JS篇㊷〗- DOM事件对象及它的属性

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

golang学习笔记——创建项目

创建项目 从Go 1.8开始,将GOPATH设置为环境变量不是必需的。如果我们没有设置一个,Go使用默认的GOPATH为$HOME/go。可以使用go env查看环境变量信息。 创建项目 # 创建项目目录 mkdir helloLog cd helloLog # 使用go mod初始化项目,生成go.mod文件 go…

数据结构绪论

基本概念 什么是数据结构: 数据: 数据,是对客观事物的符号表示,在计算机科学中是指所有能输入到计算机中并被计算机程序处理的符号的总称。 结构: 线性结构(比如图书目录文件,一对一的关系) 树形结构(…