本文主要介绍element-plus的一个vue3.xUI框架(element-ui 3 . x版本的初步体验)，通过示例代码非常详细的介绍。对大家的学习或工作都有一定的参考价值。需要的朋友可以和边肖一起学习。

突然发现半年没更新的element-ui更新了。

更新了什么还不清楚，但据了解基于VUE 3 . x版本的element-plus已经出来了。

先体验一下吧。

首先安装最新的@vue-cli，构建一个vue3.x项目。脚手架创建过程已经很简洁了，这里就不多说了。构建完成后，直接开始安装。

npm i元素-plus

为方便起见，直接采用整体引入法。

src/plugins/element.ts

从“element-plus”导入ElementPlus

导入' element-plus/lib/theme-chalk/index . CSS '

导出默认值(app: any)={

app.use(ElementPlus)

}

src/main.ts

从'导入路由器。/路由器'

从'导入存储。/商店'

从'导入应用程序。/App.vue '

从“vue”导入{ createApp }

从“”导入installElementPlus。/plugins/element

const app=createApp(App)

installElementPlus(应用程序)

app.use(商店)。使用(路由器)。挂载(#app)

向页面添加一个按钮。

el按钮类型='主' el按钮/el按钮

在新版本的vue3.x中，仍然保留了原有的生命周期功能。

已创建(){

这个。$message('message ')

},

打印了这个。

更新：

element-plus按需引入

src/plugins/element.ts

从“element-plus”导入{ Button，Message }

导出默认值(应用)={

app.use(按钮)

app.use(消息)

}

babel.config.js

模块.导出={

预设':[

@vue/cli-plugin-babel/preset '

],

插件':[

[

成分'，

{

库名':' element-plus '，

样式库名称':'主题-粉笔'

}

]

]

}

在vue3.0 setup中使用

从“vue-class-component”导入{ setup }

从“vue”导入{ getCurrentInstance }

导出默认值{

名称：“应用程序”，

组件：{

},

设置(e){

const {ctx}=getCurrentInstance()

ctx。$ message(' message ')

}

}

官方文件已更新：点击跳转

关于element-plus的这篇文章到此为止，一个vue3.xUI框架(element-ui 3 . x版本的初步体验)。有关element-plus vue3.xUI框架的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。