Vue3 按需引入 Element Plus

news2025/7/20 20:52:41

本文记录博主亲测在 Vite 创建的 Vue3 项目框架中从0开始安装配置按需引入 Element Plus 的步骤

注:以下配置的示例为 Vite 构建的 Vue3 脚手架项目

Element UI 官方指南

 安装所需插件

请在项目根目录打开终端分别执行如下安装指令:

1.安装 Element Plus

npm install element-plus --save

2.安装自动导入组件的插件 

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

 3.安装按需引入样式的插件

npm i unplugin-element-plus -D

配置 .config.js/ts 文件

然后把下列代码插入到你的 Vite  Webpack 的配置文件

// ...
// 引入 element UI
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 为 Element Plus 按需引入样式。
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({
      // options
    }),
  ]
})

 注!!!安装配置完后最好重启一下服务重新编译一下,一般装完后第一次启动时间会稍长一点,只要没出错,耐心等待加载出来就可以啦~

使用示例

注:完成以上两步安装和配置后就可以直接在页面/组件中使用 Element UI 提供的组件了,使用时也不需要再在页面中引入组件和样式,直接使用组件即可。示例如下:

页面效果:

 

注:如果配置文件是 webpack 可参考官方文档-快速开始/按需导入/webpack

 为 Element Plus 按需引入样式的 unplugin-element-plus 文档

它们只要配置稍有不同,所需插件的安装都是一样的,所以先全安装了然后统一配置好后就可以直接使用咯!

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

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

相关文章

实时车载激光雷达感知的点云深度学习

又来卷这个了,此次调查了神经网络中使用的计算表示与其性能特征之间的关系,提出了现代深度神经网络中用于3D点云处理的LiDAR点云表示的新计算分类法。使用这种分类法,对不同的方法家族进行结构化分析,论文揭示了在计算效率、内存需…

Resnet的在指静脉识别应用与改进

一、《基于改进残差网络的指静脉识别算法》_易芮 2020.5.20 由于指静脉具有区分性的特征在于其细节特征,为了减少网络训练过程中的信息丢失,在网络中采用改进的大卷积层以及BottleNeck模块. ResNet网络模型采用残差结构和跳跃连接的方式缓解了随着网络的加深而…

web前端-javascript-相等运算符(说明,== 相等运算, != 不相等运算,=== 全等运算,!== 不全等 运算)

文章目录相等运算符1. 说明2. 相等运算2.1. 当使用来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型然后再比较2.2. undefined 衍生自 null2.3. NaN 不和任何值相等,包括他本身3. ! 不相等运算4. 全…

【无百度智能云与实体经济“双向奔赴”: 一场1+1>2的双赢 标题】

实体经济,已经成为检验科技企业潜力的试金石。 在最近的财报季中,各家大厂的财报里“实体经济”都是关键字眼,已经成为各家心照不宣的共同目的地。 当然,条条大路通罗马。每一家的战略思路和打法都不一样。11月22日,…

数据结构题目收录(二十四)

1、在将序列(6,1,5,9,8,4,7)建成大根堆时,正确的序列变化过程是()。 A:6,1,7,9,8,4,5->6,9,7,1,8,4,5->9,6,7,1,8,4,5->9,8,7,1,6,4,5B:6,9,5,1,8,4,7->6,9,7,1,8,4,5->9,6,7,1,8,4,5->9,8,7,1,6,4…

【TUN模式】对QQ或者微信域名相关的网站访问非常慢、图片加载不出来、网页空白的解决方案

一、问题背景 最近在电脑上登录微信时,或者浏览微信公众号的文章时,经常出现卡顿得出不来图片的情况,即使出来了也是排版异常。 二、研究现状(哈哈哈哈科研人的写作习惯?) 目前网上有些大咖对这个问…

qt 实现PDF阅读器

1、前言 查阅资料可发现,网上的几种pdf阅读器的实现,几乎大多依赖的第三方库,这里就不做介绍了。 qt 自带的关于pdf的显示:pdfwriter、printpreviewwidget,分别为创建pdf 和 打印预览pdf。由此,后者似乎满足…

快速上手Python命令行模块Click

关于Click? 说下 Click 模块是干啥的,简单说,它就是把我们的 Python 脚本的一些函数,通过 添加带有 Click 关键字的装饰器进行装饰进而将函数调用的形式转化为命令行传参的形式然后执行。听不懂也没关系,我们会一步一步来&#x…

【OpenGL开发】VS2017+nuget配置OpenGL开发环境

文章目录1、简介1.1 先决条件1.2 查找并安装包1.3 卸载软件包1.4 更新包1.5 管理解决方案的包1.6 “合并”选项卡2、nuget配置程序源2.1 在线源2.2 本地源3、nuget安装库3.1 nuget安装nupengl.core(C)3.2 nuget安装Giawa.OpenGL(C#&#xff0…

听音乐赚钱App,每天听歌收益5美金,保姆级教学,被动收入人人可做

文章目录调研操作变现链接调研 今天分享的就是一个无门槛挂机项目。不需要科学上网,只要听歌就能赚钱。 首先我们需要先认识平台,这个平台叫做current。 是一个听音乐赚积分的平台,它这个赚钱逻辑也非常简单,在平台听歌就可以获取积分,不过最后是可以用积分兑换美金的。官方的说…

索辰科技在科创板过会:拟募资金额有所下调,上半年亏损4000万元

11月24日,上海证券交易所科创板披露的信息显示,上海索辰信息科技股份有限公司(下称“索辰科技”)获得上市委会议通过。据贝多财经了解,索辰科技于2022年6月29日递交招股书,准备在科创板上市。 据了解&#…

Word处理控件Aspose.Words功能演示:在 Python 中将 Word 文档转换为 PNG、JPEG 或 BMP

MS Word 文件到图像格式的转换让您可以将文档的页面嵌入到您的 Web 或桌面应用程序中。为了在 Python 应用程序中执行此转换,本文介绍了如何使用 Python 将 Word DOCX或DOC文件转换为PNG、JPEG或BMP图像。此外,您将学习如何使用不同的选项控制 Word 到图…

MySQL一致性读实现原理

一致性读实现原理前言MySQL中的事务事务的ACID事务的并发问题事务隔离级别InnoDB并发控制MVCC特性MVCC快照隔离级别与快照REPEATABLE READREAD COMMITTEDUndo回滚段一致性读总结前言 现在,主流关系型数据库产品基本都实现了MVCC的特性,快照在MVCC中起着…

Eureka(注册中心)

1.SpringCloud快速开发入门 1.1 搭建和配置一个服务提供者 我们知道,SpringCloud构建微服务是基于SpringBoot开发的。 1、 创建一个SpringBoot工程(SpringBoot的Web工程),并且添加SpringBoot的相关依赖; 2、 创建服…

Linus 文件处理(二)

目录 一、前言 二、标准 I/O 库 1、fopen 2、fread 3、fwrite 4、fclose 5、 fflush 6、fseek 7、fgetc, getc, and getchar 8、fputc, putc, and putchar 9、fgets and gets 三、文件和目录维护 1、chmod 2、chown 3、unlink, link, and symlink 4、mkdir and…

Anaconda3安装与配置教程(2022.11)

(1)首先前往 Anaconda 官网:Anaconda,下载安装文件: (2)安装时只需要注意设置好安装路径即可,本文安装路径为:D:\Anaconda3,安装好后打开开始菜单能看到如下启…

Java集合框架详解(四)Map接口、HashMap类、LinkedHashMap类

一、Map接口 Map接口的特点: (1)映射键值对的形式(key和value); (2)Map集合中,key是不能重复的,value是可以重复的; (3)…

电脑视频压缩软件哪个好?分享:一款支持上千种视频格式压缩神器

为了追求高清画质,现在的视频文件越来越大了。超大的文件虽然可以给人们带来更好的视觉效果,也给传输和发送带来了很大的麻烦。那有没有一款电脑视频压缩软件解决视频无损压缩问题呢?答案是肯定的! 当前, 视频压缩已经…

自动控制系统实验总结

目录 自动控制系统实验总结 稳定性 稳态精准 动态过程 自动控制系统实验总结 自动控制系统是否能很好地工作,是否能精确地保持被控量按照预定的要求规律变化这取决于被控对象和控制器及各功能元器件的特性参数是否设计得当。 在理想情况下,控制系统的输出量…

DM-微皮恩

DM_VPN 动态多站点,Hub-spoken 总分站点的VPN架构,常用于总分之间的结构。 一、DMVPN的四个组件 1. MGRE 2. NHRP(下一跳地址解析协议) 3. Dynamic Routing Protocl 4. IPsec VPN 二、MGRE 1.配置(多点GRE隧道) interface tunnel 0 #进入隧道接口…