Vue3中正确使用ElementPlus的示例代码
更新时间：2023年01月18日 15:12:02 作者：于弋gg
这篇文章主要介绍了Vue3中正确使用ElementPlus的示例代码,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、创建Vue3项目
vue create vue_element
选择自定义项目创建：
选择这几项（空格选择）
后面的几项全部回车，这里就不做介绍了，大胆回车就行，出了事算我的，除非你有特殊需求。（下面是安装成功后的图片）
二、进入项目，安装Element-Plus
（1）我这里用的是WebStorm，在命令行中执行下面代码安卓Element-Plus：
npm install element-plus --save
（2） 在main中配置Element-Plus：
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')
到这里，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上，这里就不演示了，已经有点跑题了。
到此这篇关于Vue3中正确使用ElementPlus的文章就介绍到这了,更多相关Vue3使用ElementPlus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率，这篇文章主要介绍了vue devtools的安装与使用教程,需要的朋友可以参考下2018-08-08
Element-UI日期选择器(选择日期范围)禁用未来日期实现代码
我们在网页开发时通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于Element-UI日期选择器(选择日期范围)禁用未来日期的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue动态组件与异步组件,结合实例形式分析了动态组件与异步组件相关概念、功能及使用技巧,需要的朋友可以参考下2019-02-02
m3u8是一种基于HTTP Live Streaming（HLS）文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成,下面这篇文章主要给大家介绍了关于vue3使用videojs播放m3u8格式视频的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue使用vue-cli创建项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了浅谈Vue static 静态资源路径 和 style问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue函数式组件的应用实例详解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue 用Vant实现时间选择器的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了vue项目如何通过url链接引入其他系统页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论