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

element plus使用问题

文章目录

  • element plus
    • vue.config.js
    • 注意
      • 1、有时候会报错 not a function
      • 2、使用 ElMessage 报错
      • 3、 element plus 版本过高
      • 4、警告Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined.
      • 5、报错 ResizeObserver loop completed with undelivered notifications.
  • element plus icon
    • 注意:
  • element plus 按需导入设置为中文

菜鸟使用了 element plus 创建了两个项目,结果一个没一点问题,一个老是有警告,也不知道为什么,就算版本搞成一样的也不行,只能退而求其次,不警告算了,也希望可以帮助使用 element plus 读者!!!

element plus

使用 element plus 自然要使用其最强大的按需引入,全部引入实在是太浪费了!

首先我们按照官网的步骤:

npm install -D unplugin-vue-components unplugin-auto-import

vue.config.js

按照完事之后,就要配置 webpack 了,对于 webpack 好的人可能不难,但是不好的可能就不太会,所以这里菜鸟还是写一下,官网的 webpack 需要放在 vue.config.js 里面:

const { defineConfig } = require("@vue/cli-service");// 按需引入element plus
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");const port = 8888;module.exports = defineConfig({publicPath:process.env.NODE_ENV === "production"? "./" // 生产环境: "/", // 开发环境transpileDependencies: true,productionSourceMap: false,// 按需引入element plusconfigureWebpack: {resolve: {alias: {components: "@/components",},},plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],},devServer: {port,proxy: {"/Api": {target: "http://xxxxx", // 转发接口changeOrigin: true, // 如果接口跨域,需要进行这个参数配置pathRewrite: {"^/Api": "",},headers: {referer: "http://xxxx", // 转发接口},},},},
});

然后等你兴高采烈的准备大干一场,并在项目中使用 element plus 时坑就来了,其编译的时候就会报错:

Module not found: Error: Can’t resolve ‘element-plus/es’ in
Module not found: Error: Can’t resolve ‘element-plus/es/components/base/style/css’ in

这个问题就是你没有安装 element plus 只安装了两个自动导入的插件而已,所以还要执行

npm install element-plus --save

注意

1、有时候会报错 not a function

AutoImport is not a functionat Object.<anonymous> (F:\pro\plantweb\vue.config.js:40:7)at Module._compile (node:internal/modules/cjs/loader:1198:14)at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)at Module.load (node:internal/modules/cjs/loader:1076:32)

Components is not a functionat Object.<anonymous> (F:\pro\plantweb\vue.config.js:43:7)at Module._compile (node:internal/modules/cjs/loader:1198:14)at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)at Module.load (node:internal/modules/cjs/loader:1076:32)

这个时候就要降低版本,具体参考:vue 3.0 使用element-plus按需导入方法和报错解决

2、使用 ElMessage 报错

如果你在 script 中使用了 ElMessage ,那么eslint 会报错没有引入,但是其实是没问题的,只需要在 ElMessage 之前加上该代码:

// eslint-disable-next-line

3、 element plus 版本过高

有的时候 element plus 版本高了也会报错,菜鸟没遇见,读者可以见:vue3引入element-plus报错解决方案

4、警告Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined.

vue.config.js 添加上该代码:

chainWebpack: (config) => {config.plugin("define").tap((definitions) => {Object.assign(definitions[0], {__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",});return definitions;});
},

参考:Vue3.4+报Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined… 处理

5、报错 ResizeObserver loop completed with undelivered notifications.

需要在app.vue中加入该代码:

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {constructor(callback) {callback = debounce(callback, 100); // 防抖函数自己写super(callback);}
};

参考:关于用element-ui中碰到的ERROR ResizeObserver loop completed with undelivered notifications.问题

防抖函数参考:vue3常用代码

element plus icon

使用 element plus icon 就和使用其他组件是一样的,唯一的区别就是要引入

import { } from “@element-plus/icons-vue”;

具体引入什么就是去官网点击图标,将复制下来的引入就行!

注意:

上面 npm 了 element-plus,那么这里的图标可以直接引用,不需要 npm 图标库了!

还有一个坑的地方就是按需引入,但是菜鸟发现按需引入确实可以,但是使用的是时候就不能是官网复制下来的,而是不知道哪里复制的,所以暂时不推荐使用!

按需引用参考:
1、Element Plus Icon图标自动引入
2、Vue3!ElementPlus!更加优雅的使用Icon

element plus 按需导入设置为中文

菜鸟在开发过程中,发现这些 element plus 组件全部默认都是英文,虽然很简单,改不改都无所谓,但是还是要想想怎么解决!

只需要在app.vue中加入这么一行代码就行:

<template><el-config-provider :locale="zhCn"><router-view /></el-config-provider>
</template><script setup>
// 引入element plus中文包
import zhCn from "element-plus/lib/locale/lang/zh-cn";
</script>

相关文章:

element plus使用问题

文章目录 element plusvue.config.js注意1、有时候会报错 not a function2、使用 ElMessage 报错3、 element plus 版本过高4、警告Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined.5、报错 ResizeObserver loop completed with undelivered noti…...

洛谷p1036选数

[NOIP2002 普及组] 选数 题目描述 已知 n n n 个整数 x 1 , x 2 , ⋯ , x n x_1,x_2,\cdots,x_n x1​,x2​,⋯,xn​&#xff0c;以及 1 1 1 个整数 k k k&#xff08; k < n k<n k<n&#xff09;。从 n n n 个整数中任选 k k k 个整数相加&#xff0c;可分别得…...

【JavaSE篇】——数组的定义与使用

目录 本章的目标&#xff1a; &#x1f388;数组的基本概念 &#x1f36d;创建数组 &#x1f36d;数组的初始化 &#x1f36d;数组的使用 &#x1f449;数组中元素访问 &#x1f449;遍历数组 &#x1f388;数组是引用类型 &#x1f36d;初始JVM的内存分布 &#x1f…...

HCS 华为云Stack产品组件

HCS 华为云Stack产品组件 Cloud Provisioning Service(CPS) 负责laas的云平台层的部署和升级是laas层中真正面向硬件设备&#xff0c;并将其池化软件化的部件。 Service OM 资源池(计算/存储/网络)以及基础云服务(ECS/EVS/PC)的管理工具。 ManageOne ManageOne包括服务中心…...

四、MySQL之增删改

一、插入数据 1.1、VALUES的方式添加 使用这种语法一次只能向表中插入一条数据。 1.1.1、为表的所有字段按默认顺序插入数据 INSERT INTO 表名 VALUES (value1,value2,....);// 值列表中需要为表的每一个字段指定值&#xff0c;并且值的顺序必须和数据表中字段定义时的顺序相…...

MQ面试题之Kafka

前言 前文介绍了消息队列相关知识&#xff0c;并未针对某个具体的产品&#xff0c;所以略显抽象。本人毕业到现在使用的都是公司内部产品&#xff0c;对于通用产品无实际经验&#xff0c;但是各种消息中间件大差不差&#xff0c;故而本次选择一个相对较熟悉的Kafka进行详细介绍…...

2023年CSDN年底总结-独立开源创作者第一年

2023年最大的变化&#xff0c;就是出来创业&#xff0c;当独立开源创作者&#xff0c;这一年发起SolidUI开源项目&#xff0c;把知乎重新开始运营起来。CSDN粉丝破万&#xff0c;CSDN博客专家和AI领域创作者。 2023年年度关键词&#xff1a;创业 https://github.com/CloudOrc…...

hardware simulation——编译框架优化

目录 介绍 修改前的最新代码和框架 学习和修改 最终版本 介绍 -------------------------------------------------------------------------------------------------------------------------- https://www.cnblogs.com/wittxie/p/9836097.html 上次那个虽然能完成基本…...

Leetcode刷题笔记题解(C++):1971. 寻找图中是否存在路径

思路&#xff1a; 1.建立图集&#xff0c;二维数组&#xff0c;path[0]里面存放的就是与0相连的节点集合 2.用布尔数组来记录当前节点是否被访问过&#xff0c;深度优先会使用到 3.遍历从起点开始能直接到达的点&#xff08;即与起点相邻的点&#xff09;&#xff0c;判断那…...

ARM常用汇编指令

文章目录 前言一、处理器内部数据传输指令MOV&#xff1a; 将数据从一个寄存器复制到另一个寄存器。MRS&#xff1a; 将特殊寄存器(CPSR,SPSR)中的数据传给通用寄存器。MSR&#xff1a; 将通用寄存器中的数据传给特殊寄存器(CPSR,SPSR)。 二、存储器访问指令LDR:用于从内存中加…...

kali系统入侵电脑windows(win11系统)渗透测试,骇入电脑教学

本次渗透测试将使用kali虚拟机&#xff08;攻击机&#xff09;对本机&#xff08;靶机&#xff09;进行入侵并监控屏幕 声明&#xff1a;本篇仅仅是将本机作为靶机的一次简易渗透测试&#xff0c;实际情况中基本不可能出现如此简单的木马骇入&#xff08;往往在上传木马时就被防…...

力扣hot100 矩阵置零 标识位

Problem: 73. 矩阵置零 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 参考 复杂度 时间复杂度: O ( n m ) O(nm) O(nm) 空间复杂度: O ( 1 ) O(1) O(1) Code class Solution {public static void setZeroes(int[][] matrix) {int n matrix.length;i…...

Android App开发-简单控件(3)——常用布局

3.3 常用布局 本节介绍常见的几种布局用法&#xff0c;包括在某个方向上顺序排列的线性布局&#xff0c;参照其他视图的位置相对排列的相对布局&#xff0c;像表格那样分行分列显示的网格布局&#xff0c;CommonLayouts以及支持通过滑动操作拉出更多内容的滚动视图。 3.3.1 线…...

Linux使用二进制包安装MySQL

目录 一、软件包下载 二、上传软件包到Linux根目录 1、使用xftp将软件包上传到根目录 2、解压缩 三、准备工作 四、初始化软件 五、设置MySQL的配置文件 六、配置启动脚本 一、软件包下载 官网下载&#xff1a;MySQL :: Download MySQL Community Server 二、上传软件…...

【vue3-pbstar-admin】一款基于vue3和nodejs的简洁后台管理系统

Vue3-pbstar-admin 是一个简洁的后台解决方案&#xff0c;提供了基础的用户体系和页面接口权限配置&#xff0c;方便用户进行自定义开发&#xff0c;避免不必要的代码冗余。该方案结合了 Vue3、Element-Plus、Pinia 和 Vite 等先进技术&#xff0c;实现高效的页面布局、状态管理…...

顺序表和链表【数据结构】【基于C语言实现】【一站式速通】

目录 顺序表 顺序表的优点 顺序表的实现 1.结构体的定义 2.初始化数组 3.插入数据 4.其余接口函数的实现 5.释放内存 顺序表的缺陷 单向链表 单向链表的优点 单向链表的实现 1.链表的定义 2.链表的初始化 3.其余接口函数的实现 5.释放内存 单向链表的缺陷 双…...

SpringBoot 有什么优点?

Spring Boot 是一个用于简化和加速 Spring 框架应用程序开发的项目。它构建在 Spring 框架之上&#xff0c;提供了一种快速开发、简化配置和集成的方式。以下是 Spring Boot 的一些优点&#xff1a; 1、简化配置&#xff1a; Spring Boot 使用约定大于配置的理念&#xff0c;通…...

扫地机器人(二分算法+贪心算法)

1. if(robot[i]-len<sweep)这个代码的意思是——如果机器人向左移动len个长度后&#xff0c;比现在sweep的位置&#xff08;现在已经覆盖的范围&#xff09;还要靠左&#xff0c;就是覆盖连续不起来&#xff0c;呢么这个len就是有问题的&#xff0c;退出函数&#xff0c;再…...

Unity中创建Ultraleap 3Di交互项目

首先&#xff0c;创建新的场景 1、创建一个空物体&#xff0c;重命名为【XP Leap Provider Manager】&#xff0c;并在这个空物体上添加【XR Leap Provider Manager】 在物体XP Leap Provider Manager下&#xff0c;创建两个子物体Service Provider(XR)和Service Provider(…...

【Matlab】音频信号分析及FIR滤波处理——凯泽(Kaiser)窗

一、前言 1.1 课题内容: 利用麦克风采集语音信号(人的声音、或乐器声乐),人为加上环境噪声(窄带)分析上述声音信号的频谱,比较两种情况下的差异根据信号的频谱分布,选取合适的滤波器指标(频率指标、衰减指标),设计对应的 FIR 滤波器实现数字滤波,将滤波前、后的声音…...

为什么选择Practical Modern JavaScript:探索ES6未来发展方向

为什么选择Practical Modern JavaScript&#xff1a;探索ES6未来发展方向 【免费下载链接】practical-modern-javascript &#x1f3ca; Dive into ES6 and the future of JavaScript 项目地址: https://gitcode.com/gh_mirrors/pr/practical-modern-javascript Practic…...

别再手动画点阵了!用PCtoLCD2002搞定LCD/OLED汉字显示,附STM32移植代码

嵌入式开发实战&#xff1a;PCtoLCD2002字模生成与STM32显示全链路解析 在嵌入式设备上实现中文显示一直是开发者面临的经典难题。传统的手动绘制点阵方式不仅效率低下&#xff0c;而且难以保证显示效果的一致性。本文将深入探讨如何利用PCtoLCD2002工具链&#xff0c;从字模生…...

陶哲轩:AI让数学进入「工业化」时代,数学家也可以是「包工头」

来源&#xff1a;机器之心编辑&#xff1a;张倩、陈陈很多人提到数学研究&#xff0c;脑子里浮现的还是那个画面&#xff1a;一个人&#xff0c;一块白板&#xff0c;来回踱步&#xff0c;等灵感突然降临。但当今世界最伟大的数学家之一、菲尔兹奖得主陶哲轩却告诉我们&#xf…...

小白卖家的“时间困境”:为什么我每天忙得要死,却不出单?

忙碌不是努力&#xff0c;是方法出了问题。入行跨境电商三个月了。从零到日出百单&#xff0c;这条路我算是走通了。但回想起来&#xff0c;最让我后怕的&#xff0c;不是刚开始没单的那段日子&#xff0c;而是中间那段“看起来很忙”的日子。每天从早忙到晚&#xff0c;电脑上…...

从零理解自然数系统:用Python类模拟皮亚诺公理(含加法乘法实现)

从零构建自然数系统&#xff1a;用Python类实现皮亚诺公理与算术运算 在计算机科学中&#xff0c;自然数系统的构建是一个令人着迷的基础课题。当我们抛开编程语言内置的数字类型&#xff0c;仅用最基本的类和递归概念来重新定义自然数时&#xff0c;会惊讶地发现数学的抽象之美…...

不用第三方工具!用Altium Designer 24原生功能实现Allegro到PADS的PCB文件转换

解锁Altium Designer 24原生转换能力&#xff1a;Allegro到PADS的PCB文件高效迁移指南 在硬件开发领域&#xff0c;跨EDA平台协作已成为常态。当设计团队使用不同工具链时&#xff0c;文件格式转换往往成为效率瓶颈。传统方案依赖第三方转换工具&#xff0c;不仅增加成本&#…...

自动驾驶避障算法实战:从动态规划(DP)到模型预测控制(MPC)的Matlab代码详解

自动驾驶避障算法实战&#xff1a;从动态规划到模型预测控制的Matlab实现 自动驾驶技术的核心挑战之一是如何在复杂环境中实现安全避障。本文将深入探讨两种主流算法——动态规划(DP)与模型预测控制(MPC)的代码级实现&#xff0c;通过Matlab示例展示它们如何协同工作来解决这一…...

【机器人导航】Ubuntu16.04下北斗星通接收机硬件连接与串口配置指南

1. 北斗星通接收机硬件连接指南 第一次接触北斗星通接收机时&#xff0c;我完全被它铝合金外壳的专业感震撼到了。这种工业级设备虽然看起来复杂&#xff0c;但只要掌握正确方法&#xff0c;连接起来其实比想象中简单得多。我们以NC502-D型接收机为例&#xff0c;这是机器人导航…...

终极指南:如何通过OmenSuperHub高效掌控暗影精灵硬件性能

终极指南&#xff1a;如何通过OmenSuperHub高效掌控暗影精灵硬件性能 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 想要彻底摆脱官方Omen Gaming Hub的臃肿体验&#xff0c;获得纯净高效的暗影精灵硬件控制工具吗&#xf…...

51单片机项目避坑实录:我的声光控灯为什么白天也亮?从硬件到代码的故障排查指南

51单片机声光控灯项目实战&#xff1a;从硬件选型到代码调试的深度避坑指南 深夜的实验室里&#xff0c;我盯着眼前这个不听话的声光控灯——明明窗外阳光明媚&#xff0c;它却固执地亮着。作为一名嵌入式开发新手&#xff0c;这个看似简单的51单片机项目让我踩遍了所有可能的坑…...