Element-plus自动导入

安装

npm i element-plus 

自动引入

1. 安装两个插件
npm install -D unplugin-vue-components unplugin-auto-import
2. 配置插件

vue3项目修改vite.config.js,把两个插件添加入即可,注意:不是覆盖原有配置

  • Vite
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

其他webpack项目修改webpack.config.js

  • webpack
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

自此,项目中的插件都可以直接使用,无需再导入,运行或打包时,会自动导入。

问题

当我们在js中使用组件时,不导入会报错,导入后不走自动导入,样式加载就会出问题,最典型的就是ElMessage组件

解决方案:
在.eslintrc.cjs中加入全局变量名
在这里插入图片描述

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

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

相关文章

大模型:OneFitsAll、Time - LLM、LLaTA

LLM数据集:ETT、Illness、Weather ETT、Illness、Weather在上述提到的论文中都是用于时间序列预测研究的真实世界数据集,以下是对它们的具体介绍: ETT数据集 内容:ETT是电力变压器温度(Electric Transformer Temperature)数据集,通常包含电力变压器在不同时间点的温度…

Ardunio BLE keyboard 库的使用

为了开发一个 ardunio 的蓝牙选歌器,网络上普遍推荐使用: https://github.com/T-vK/ESP32-BLE-Keyboard 结果搞了好几天,就是不行。最后发现,下面两点非常重要: 使用 NimBle-ardunio 库这个库目前是2.1.2 &#xff…

客户案例:基于慧集通平台集成打通小满CRM+金蝶云星空+钉钉

一、引言 本案例原型公司是一家生物科技公司,公司自开创以来专注于体外诊断生物活性原材料的研究、生产、销售和服务,致力于为全球体外诊断试剂生产企业提供领先且具有竞争力的核心原料和相关辅助产品服务。公司以卓越的产品和优质的服务赢得了客户的广…

基于FISCO BCOS的电子签章系统

概述 本项目致力于构建一个安全、高效且功能完备的电子印章系统,通过整合区块链技术与传统数据库管理,为用户提供了可靠的电子签章解决方案,有效应对传统电子签章系统的数据安全隐患,满足企业和个人在数字化办公环境下对电子文档…

【2025最新计算机毕业设计】基于SpringBoot+Vue在线考试系统(源码包运行)【提供源码+答辩PPT+文档+项目部署】

作者简介:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容:🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

如何设置Edge浏览器访问软件

使用Edge浏览器访问分销ERP A\V系列软件时会出现各种报错,如何设置Edge浏览器使其正常访问,请看下面的具体操作。 一、打开Edge浏览器,点击右上角的 设置及其他,如图: 二、在弹出界面中,点击 扩展&#xff…

[创业之路-222]:波士顿矩阵与GE矩阵在业务组合选中作用、优缺点比较

目录 一、波士顿矩阵 1、基本原理 2、各象限产品的定义及战略对策 3、应用 4、优点与局限性 二、技术成熟度模型与产品生命周期模型的配对 1、技术成熟度模型 2、产品生命周期模型 3、技术成熟度模型与产品生命周期模型的配对 三、产品生命周期与产品类型的对应关系 …

计算机图形学知识点汇总

一、计算机图形学定义与内容 1.图形 图形分为“图”和“形”两部分。 其中,“形”指形体或形状,存在于客观世界和虚拟世界,它的本质是“表示”;而图则是包含几何信息与属性信息的点、线等基本图元构成的画面,用于表达…

Tomcat介绍、下载安装、使用(部署项目)

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

2024.12.29(进程线程实现并发服务器)

作业 多进程多线程并发服务器实现一遍提交。 服务器 #include <myhead.h> #define PORT 12345 #define IP "192.168.124.123"void *fun(void *fd) {int newfd *(int *)fd;char buff[1024];while(1){int res recv(newfd,buff,sizeof(buff),0);if(res 0){p…

docker django uwsgi 报错记录

这个配置中是能够正常进行网页访问的&#xff0c;能够查看网页 [uwsgi] chdir /home/luichun/lc/Pyfile/PyCursor/app module app.wsgi:application plugin-dir /usr/lib/uwsgi/plugins plugins python311 env TZAsia/Shanghai socket-timeout 60 websocket-ma…

初学STM32 ---高级定时器互补输出带死区控制

互补输出&#xff0c;还带死区控制&#xff0c;什么意思&#xff1f; 带死区控制的互补输出应用之H桥 捕获/比较通道的输出部分&#xff08;通道1至3&#xff09; 死区时间计算 举个栗子&#xff08;F1为例&#xff09;&#xff1a;DTG[7:0]250&#xff0c;250即二进制&#x…

保护眼睛的小工具

每天盯着电脑和手机&#xff0c;眼睛真的吃不消&#xff0c;分享一些有用的小工具。 只说一下我使用的工具&#xff0c;类似的工具有很多&#xff0c;萝卜青菜各有所爱。 定时提醒 类似闹钟&#xff0c;定时在屏幕上出现提示。有倒计时功能&#xff0c;时间可以自由设定。 wi…

数据库索引与 MVCC:原理、应用及事务隔离

1.什么时候不要使用索引&#xff1f; 在数据库设计和优化中&#xff0c;索引是提高查询性能的重要工具。然而&#xff0c;并不是所有情况下都适合使用索引。以下是一些不应该或不需要使用索引的情况&#xff1a; 小表&#xff1a;对于非常小的表&#xff08;例如&#xff0c;…

Java网约车项目实战:实现抢单功能详解

在网约车项目中&#xff0c;抢单功能是非常关键的一部分&#xff0c;它决定了司机能否及时响应乘客的订单&#xff0c;提高整个平台的运营效率。本文将详细介绍如何使用Java来实现网约车项目的抢单功能&#xff0c;并提供一个完整的代码示例&#xff0c;以便读者能够直接运行和…

brupsuite的基础用法常用模块(1)

proxy模块&#xff1a; Options: 设置代理端口&#xff0c;默认为8080端口&#xff0c;若8080端口被占用可在该界面更改代理端口. HTTP history: 拦截的历史请求&#xff0c;右键可做更多操作&#xff0c;很多操作与其他模块有关。&#xff08;清除历史的话右键选择clear p…

Kubernetes 的资源管理方式(二)

Kubernetes 的资源管理方式 命令式对象配置 命令式对象配置就是通过命令配置和配置文件去操作 Kubernetes 的资源。 命令式对象配置的方式操作资源&#xff0c;可以简单的认为&#xff1a;命令 yaml 配置文件&#xff08;里面是命令需要的各种参数&#xff09;。 ① 创建一…

Linux 笔记 SELinux 常见操作与介绍

SELinux&#xff08;Security-Enhanced Linux&#xff09;是 Linux 操作系统中的一种安全模块&#xff0c;旨在提供更细粒度的访问控制。它最初由美国国家安全局&#xff08;NSA&#xff09;开发&#xff0c;目的是增强 Linux 系统的安全性。SELinux 通过强制访问控制&#xff…

Postman接口测试03|执行接口测试、全局变量和环境变量、接口关联、动态参数、断言

目录 七、Postman 1、安装 2、postman的界面介绍 八、Postman执行接口测试 1、请求页签 3、响应页签 九、Postman的环境变量和全局变量 1、创建环境变量和全局变量可以解决的问题 2、postman中的操作-全局变量 1️⃣手动设置 2️⃣代码设置 3️⃣界面获取 4️⃣代…

旅游管理系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库…