本文主要介绍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框架的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！