如何在Vue3中正确使用ElementPlus,亲测有效,避坑
更新时间：2024年03月20日 17:19:21 作者：于弋gg
这篇文章主要介绍了如何在Vue3中正确使用ElementPlus,亲测有效,避坑！具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、创建Vue3项目
vue create vue_element
选择自定义项目创建：
选择这几项（空格选择）
后面的几项全部回车，这里就不做介绍了，大胆回车就行，出了事算我的，除非你有特殊需求。
（下面是安装成功后的图片）
二、进入项目,安装Element-Plus
（1）我这里用的是WebStorm，在命令行中执行下面代码安卓Element-Plus：
npm install element-plus --save
（2） 在main中配置Element-Plus：
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
到这里，Element-Plus里面的控件你都可以使用了。
后面讲介绍，如何使用ElementPlus中的Icon控件的配置。
三、配置Icon
（1）在终端执行下面代码进行安装：
npm install @element-plus/icons-vue
（2）在main中进行配置
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router).use(ElementPlus).mount('#app')
这样就可以使用所有ElementPlus配件了
四、测试运行
（1） 配置一个编译器
(2) 随便找一个ElementPlus用一下子看看。
拿他试一下，直接把代码复制到你的Vue就可以。
结果：
五、Git提交一下
总是报红怎么办？说明提示你修改了没有提交到git里面。
有强迫症的看一下。
git add . 后再git status看一下子，这样之后就不报红，并提交到git上面了，如果你要pull到github上，这里就不演示了，已经有点跑题了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue 动态组件的应用场景很多,可应用于动态页签,动态路由等场景,其核心原理是批量注册,在Vue2和Vue3中实现原理相同,只是语法略有差异,本文给大家介绍了Vue批量注册组件实现动态组件技巧,需要的朋友可以参考下2024-11-11
从Vue转换看Webpack与Vite 代码转换机制差异详解
这篇文章主要为大家介绍了从Vue转换看Webpack与Vite代码转换机制差异详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了Vue3配置代理后页面500/404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
uni-app中App与webview双向实时通信详细代码示例
在移动应用开发中,uni-app是一个非常流行的框架,它允许开发者使用一套代码库构建多端应用,包括H5、小程序、App等,这篇文章主要给大家介绍了关于uni-app中App与webview双向实时通信的相关资料,需要的朋友可以参考下2024-07-07
Vue-Router路由是根据不同的url地址展现不同的内容或页面,这篇文章主要给大家介绍了关于Vue3中如何使用Vue Router的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
本篇文章主要介绍了vue构建单页面应用实战，使用 SPA，没有页面切换，就没有白屏阻塞，可以大大提高 H5 的性能，达到接近原生的流畅体验。2017-04-04
这篇文章主要介绍了关于VueRouter导入的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Element-UI Table组件上添加列拖拽效果实现方法
这篇文章主要为大家详细介绍了Element-UI Table组件上添加列拖拽效果的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
本篇文章主要介绍了vue Render中slots的使用的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-07-07
这篇文章主要介绍了Vue实现tab切换的两种方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
最新评论