vue3使用element-ui,vue3.0支持element

　　本文主要介绍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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。