Vue3中正确使用ElementPlus的示例代码

目录 一、创建Vue3项目 二、进入项目，安装Element-Plus 三、配置Icon 四、测试运行 五、Git提交一下

一、创建Vue3项目@H_ 360 _19@

vue  create  vue_element

选择自定义项目创建：

选择这几项（空格选择）

后面的几项全部回车，这里就不做介绍了，大胆回车就行，出了事算我的，除非你有特殊需求。（下面是安装成功后的图片）

二、进入项目，安装Element-Plus

（1） 我这里用的是WebStorm，在命令行中执行下面代码 安卓 Element-Plus：

 npm install element-plus - -s ave

（2） 在m ai n中配置Element-Plus：

import * as ElementPlusIconsVue  From  '@element-plus/icons-vue'

const app = createApp(App)
for (const [key,  component ] of Object.entries(ElementPlusIconsVue)) {
    app .COM ponent(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 f rom  '@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就可以。

结果：

@H_313_ 126 @

五、G IT 提交一下

总是报红怎么办？说明提示你修改了没有提交到git里面。有强迫症的看一下。

git add . 后再git stat us看一下子，这样之后就不报红，并提交到git上面了，如果你要pull到gith ub 上，这里就不演示了，已经有点跑题了。

到此这篇关于Vue3中正确使用ElementPlus的 文章 就介绍到这了,更多相关Vue3使用ElementPlus内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: 手摸手教你实现Vue3 Reactivity Vue3源码分析调度器与watch用法原理 vue3中的对象时为proxy对象如何获取值(两种方式) vue中下拉框组件的封装方式 vue3源码分析reactivity实现原理

总结

以上是 为你收集整理的 Vue3中正确使用ElementPlus的示例代码 全部内容，希望文章能够帮你解决 Vue3中正确使用ElementPlus的示例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue3中正确使用ElementPlus的示例代码的详细内容...