element-plus 一个vue3.xUI框架 (element-ui的3.x 版初体验)

element-plus 一个vue3.xUI框架 (element-ui的3.x 版初体验)突然发现已经半年没更新的element-ui更新了更新了什么还不清楚,但是告知了基于vue3.x版本的element-plus已经出来了。先来上手体验一下首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了。建好之后,直接开始安装吧npmielement-plus为了方便,直接采取全部引入的方式src/plugins/element.tsimportElementPlusfrom’element-plus’impor

大家好,又见面了,我是你们的朋友全栈君。

官方文档已更新: 点击跳转

突然发现已经半年没更新的element-ui更新了
在这里插入图片描述
更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。
在这里插入图片描述
先来上手体验一下
首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了。建好之后,直接开始安装吧

npm i element-plus 

为了方便,直接采取全部引入的方式

src/plugins/element.ts

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default (app: any) => { 
   
  app.use(ElementPlus)
}

src/main.ts

import router from './router'
import store from './store'
import App from './App.vue'
import { 
    createApp } from 'vue'
import installElementPlus from './plugins/element'
const app = createApp(App)
installElementPlus(app)
app.use(store).use(router).mount('#app')

在页面中加一个按钮

<el-button type="primary">el-button</el-button>

在这里插入图片描述
在新版的vue3.x版本中还保留了原有的生命周期函数

created(){ 
   
  this.$message("message")
},

在这里插入图片描述
打印了一下this
在这里插入图片描述

更新补充:

element-plus按需引入

src/plugins/element.ts

import { 
    Button, Message } from 'element-plus'

export default (app) => { 
   
  app.use(Button)
  app.use(Message)
}

babel.config.js

module.exports = { 
   
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      { 
   
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在vue3.0 setup中使用

import { 
    setup } from 'vue-class-component'
import { 
    getCurrentInstance } from 'vue'
export default { 
   
  name: 'App',
  components: { 
   

  },
  setup(e){ 
   
    const { 
   ctx} = getCurrentInstance()
    ctx.$message("mesage")
  }
}

更新:ctx 打包之后无法调用$message,可以使用proxy

import { 
    getCurrentInstance } from 'vue'
export default { 
   
  name: 'App',
  components: { 
   

  },
  setup(){ 
   
    const { 
   proxy} = getCurrentInstance()
    proxy.$message("mesage")
  }
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141902.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python更新pip失败_findwindow函数

    python更新pip失败_findwindow函数我使用pywin32扩展来解决FindWindow问题.简单的C代码:intmain(){HWNDh=FindWindow(NULL,TEXT(“SomeApp”));if(h!=INVALID_HANDLE_VALUE)SetForegroundWindow(h);return0;}效果很好.与python相同:importwin32guih=win32gui.FindW…

  • DropDownList1_SelectedIndexChanged使用

    DropDownList1_SelectedIndexChanged使用       今天写代码给DropDownList1添加DropDownList1_SelectedIndexChanged事件,在运行测试时发现DropDownList1的index发生改变后DropDownList1_SelectedIndexChanged没有执行,查了一下DropDownList1的属性才知道AutoPostBack要设置成true,才会执行DropDownList1_S

  • DeepLab v3_deeplab模型导出

    DeepLab v3_deeplab模型导出大年初一我居然在更博客。今年过年由于病毒横行,没有串门没有聚餐,整个人闲的没事干。。。医生真是不容易,忙得团团转还有生命危险,新希望他们平安。本篇不属于初级教程。如果完全看不懂请自行谷歌或搜索作者博客。deeplab官方提供了多种backbone,通过train.py中传递参数,–model_variant=”resnet_v1_101_beta”\可以更改backbone。…

  • 九九乘法表

    九九乘法表九九乘法表

  • 关于基于密度的聚类方法_凝聚聚类算法

    关于基于密度的聚类方法_凝聚聚类算法本文原作者:微信公众号“燕哥带你学算法”团队的祝烨博士,目前在墨尔本从事博士后研究。“Theobservationofandthesearchforsimilaritiesanddifferencesarethebasisofallhumanknowledge.”——ALFREDB.NOBEL“人类所有知识的基础就是观察和寻找相似与相异”——阿尔弗雷德·伯

  • 加密通讯协议SSL编程

    加密通讯协议SSL编程1.   示例包readme为包内容说明,run_server.sh用来运行服务端,run_client.sh用来运行客户端,mk_server.sh用来编译服务端,mk_client.sh用来编译客户端,make_key.sh用来生成钥匙KEY。2.   什么是SSL?在学习openssl编程之前,先了解一下什么是SSL,有助于后续的学习。SSL是一个缩写,代表的是

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号