关于element-ui 与element-plus的安装

最新推荐文章于 2025-10-28 22:16:33 发布
原创 最新推荐文章于 2025-10-28 22:16:33 发布 · 3.3k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui #vue.js #javascript

本文详述了如何在Vue 3.0中替换Element UI，须知element-ui不支持vue3，需先卸载再装element-plus。关键步骤包括正确配置main.js，注意引入默认样式的路径调整。

关于vue3.0里面element组件的应用

首先就是element-ui这个名字的是针对vue2.0的，对于现在的vue3.0来说是不支持的，vue3.0的是element-plus.

对于vue3.0来说，如果之前安装过element-ui那么就需要先卸载，再重新安装element-plus.
在这里插入图片描述
然后等待其卸载完毕，这个过程可能会比较长，需要两三分钟的样子，期间出现页面停止不动也不要管它，反正一定要等到他跳出文件目录为止

然后再输入
在这里插入图片描述
等待其安装完毕。

在main.js文件中配置的时候有一些和网上大多数人不一样的地方
在这里插入图片描述
网上的
在这里插入图片描述
后来去w3c官网看ElementPlus 快速上手_w3cschool

知道是路径不一样，需要更改
在这里插入图片描述
之后就可以引入element-plus的默认样式了，注意：这个index.css直接按’/是没有的’，只会有’index.full’，没有就手动改成.css

这样就可以在vue3.0里面使用element组件了。

Element-ui和Element-Plus的区别_Element2和Element3的区别
天马3798
02-04 2万+
Element-ui和Element-Plus的区别_Element2和Element3的区别 一、定义区别 Element-UI对应Element2：基本不支持手机版 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element-Plus对应Element3：组件布局考虑了手机版展示 基于 Vue 3，面向设计师和开发者的组件库 二、框架区别 Element-ui适用于Vue2框架 Element-plus适用于Vue3框架 三、开发中
elementplus1. vue3中element-ui的使用 --elementPlus
yangyangdt的博客
01-16 1472
vue3中elementplus的使用成功测试。
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
01-18
突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚，但是告知了基于vue3.x版本的 element-plus 已经出来了。 先来上手体验一下 首先安装一个最新的@vue-cli，搭建一个vue3.x的项目，脚手架创建流程已经很简洁了，这里就不多说了。建好之后，直接开始安装吧 npm i element-plus 为了方便，直接采取全部引入的方式 src/plugins/element.ts import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.c
ElementPlus的简单使用
最新发布
2509_93956890的博客
10-28 465
Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。官方网站：https://element-plus.org/zh-CN/#/zh-CN链接:link。
ElemenPlus与ElementUI
秋书一叶的博客
08-26 9804
Element Plus 是一个基于 Vue.js 的开源 UI 组件库，旨在帮助开发者构建出现代化、美观且高效的 Web 应用程序界面。它是对 Element UI 的进一步发展，专注于提供更好的性能、更丰富的组件以及更好的开发体验。
Element UI 及 Element Plus框架
热门推荐
Jim Zheng
11-16 3万+
既然基于Vue，所以可以使用打包工具打包，例如 Vite或WePack。当然Element UI与有React及Angular的版本了。一，何为Element UI 及 Element Plus？二、Element UI 与 Element Plus区别？三、Element UI 与 Element Plus使用。而Element UI是基于Vue 2.目前还处于快速开发迭代中。
精选资源
element-plus(element-plus@2.8.1/element-plus-2.8.1) 本地离线资源
08-27
/npm/element-plus@2.8.1/dist 37.2K /npm/element-plus@2.8.1/es 36.4K /npm/element-plus@2.8.1/lib /npm/element-plus@2.8.1/theme-chalk 394 /npm/element-plus@2.8.1/attributes.json /npm/element-...
精选资源
HTML+Element-ui邮件管理前端界面
07-12
若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui -->...
Element-ui v2.15.13离线文档 解压后 双击index.html即可
09-12
需要注意的是，Element-ui v2.15.13是一个较为老旧的版本，随着技术的发展和项目需求的变化，Element-ui已经更新至更高版本，如Element Plus，它是一个基于Vue 3.0的版本，更好地适应了当前前端开发的最新趋势。...
精选资源
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版
04-05
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版。使用了最新的vue3，vite4，TypeScript等主流技术开发，开箱即用的中后台前端解决方案，
精选资源
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
Element UI 与 Element Plus的区别
刚刚开始写播客....
03-25 1658
【代码】Element UI 与 Element Plus的区别。
【前端】Element-UI和Element-Plus的区别
欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
06-22 3万+
【前端】Element-UI和Element-Plus的区别
element UI 和 element plus 在组件上有哪些不同
大剑师兰特的GIS世界
08-20 1550
Element UI 和 Element Plus 是饿了么团队开发的 Vue 组件库，主要区别在于：Element UI 仅支持 Vue 2 且已停止维护，而 Element Plus 专为 Vue 3 设计，持续更新。Element Plus 重构了原有组件，新增 20+ 实用组件（如骨架屏、暗黑模式），全面支持 TypeScript，采用现代 SVG 图标系统，性能更优。设计上更简洁美观，支持按需引入和国际化。建议新项目直接使用 Element Plus，Vue 2 项目也应尽快迁移。
【elementUi】与【elementPlus】图标引入的区别，elementPlus图标引入不成功
qq_53478650的博客
02-02 1137
然后重新启动idea，并且重新书写标签代码，这个时候它会帮你自动引入。elementplus中要自己成为一个标签的形式引入。elementui中以类的名字与标签绑定即可引入。最好在使用标签之前安装elementplus。elementui图标官网。
关于element-plus(vue3)和element-ui(vue2)两个ui框架的不同和使用区别（持续更新）
qq_42119742的博客
12-16 6948
element-ui 关于prop使用多的场景 分别是在el-from 和el-tabel 在el-from中的prop属性传值是用于表单校验 在el-tabel中的pros是渲染data中的key值 在elemen-plus中el-dialog与elenent-ui有何不同 在element-ui中的dialog有 :visible.sync属性 可进行父子组件之间的双向绑定（vue2写法） 具体的写法为： 子组件写法 <el-dialog :visible.sync="isShow"> &
《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等
前端技术
04-23 1225
《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等
Element-plus 与Element 2.x的差异-部分
dyp330的专栏
04-09 2687
一、 组件里插槽的书写变化： 组件 Element-plus Element 2.x 备注 input 插槽 #append slot="append" 插槽名称没有变化只是写法有差异 input 默认插槽 #default 默认插槽 slot 使用#defaul
element-plus和element-UI的关系
05-14
### Element-Plus 与 Element-UI 的关系 Element-Plus 和 Element-UI 是由同一团队开发的 UI 组件库，它们之间存在一定的继承和发展关系。以下是两者的主要区别和联系： #### 联系 - **同源性** Element-Plus 可以看作是 Element-UI 的升级版[^1]。它延续了 Element-UI 的设计理念，提供了类似的组件功能，并保持了一致的设计风格。 - **生态兼容性** 如果开发者熟悉 Element-UI 的使用方法，在迁移到 Element-Plus 时会发现许多概念和逻辑相似，降低了学习成本。 --- #### 区别 ##### 1. Vue 版本支持 - **Element-UI**: 基于 Vue 2 开发，仅适用于 Vue 2 项目[^2]。 - **Element-Plus**: 针对 Vue 3 设计，充分利用 Composition API 和其他 Vue 3 新特性[^2]。 ##### 2. 图标系统 - **Element-UI**: 使用字体图标（Font Icon），通过 `icon` 属性指定图标名称。 - **Element-Plus**: 改用了 SVG 图标系统，提供更灵活的自定义能力。例如，可以通过 `<el-icon>` 组件嵌套具体图标的子组件来实现[^3]： ```vue <template> <div> <!-- 自带属性 --> <el-icon :size="size" :color="color"> <Edit /> </el-icon> <!-- 独立使用 --> <Edit /> <el-icon> <CopyDocument /> </el-icon> </div> </template> ``` ##### 3. 功能扩展 - **Element-UI**: 提供基础的功能覆盖，满足大多数场景需求。 - **Element-Plus**: 不断引入新的组件和增强现有组件的能力，例如新增的颜色选择器改进、时间范围限制等功能。 ##### 4. 性能优化 由于基于 Vue 3 构建，Element-Plus 在性能上有显著提升，尤其是在大规模应用中的渲染效率更高[^2]。 ##### 5. 社区和支持 - **Element-UI**: 已进入维护阶段，不再有大版本更新。 - **Element-Plus**: 正处于活跃开发状态，社区贡献频繁，文档和示例更加完善[^1]。 --- ### 结论 Element-Plus 是 Element-UI 的下一代产品，旨在适配 Vue 3 并带来更好的用户体验和技术支持。对于新项目推荐优先考虑 Element-Plus；而对于已有 Vue 2 项目的迁移，则需评估工作量并逐步过渡到 Vue 3 和 Element-Plus。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值