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)
blank

相关推荐

  • stm32f4的程序移植到stm32f1_试管移植后hcg参考值

    stm32f4的程序移植到stm32f1_试管移植后hcg参考值最近做了从STM32F103到STM32F407的程序移植工作。在做这项工作之前发现网上没有太全面的移植攻略,因而确实费了一番功夫和走了一些弯路。现在程序移植工作基本做完,趁着还能记起来遇到的问题,把程序移植需要注意的点整理在这里,希望对以后做这个工作的朋友能有些帮助。虽然我做的是F407的移植,但是大部分内容对于F40xx_41xx,乃至F4其他系列的芯片都适用。文章如要转载请私

    2022年10月15日
  • 越权漏洞(IDOR)测试技巧「建议收藏」

    越权漏洞(IDOR)测试技巧「建议收藏」文章目录一、IDOR介绍二、常见的测试技巧1.改变HTTP请求方法2.路径穿越绕过3.改变Content-type(内容类型)4.用数字ID替换非数字5.大小写替换绕过6.用通配符替换ID7.给Web应用提供一个请求ID,哪怕它没作要求8.HTTP参数污染,为同一参数提供多个值。9.更改文件类型。添加不同的文件扩展名(例如.json,.xml,.config)10.JSON参数污染11.在请求体用数组包装参数值12.尝试不同版本的API三、总结一、IDOR介绍IDOR,InsecureDire.

  • GTM(Global Traffic Manager)和GSLB(Global Server Load Balancing)服务介绍「建议收藏」

    GTM(Global Traffic Manager)和GSLB(Global Server Load Balancing)服务介绍「建议收藏」最近看到一篇关于GSLB的文章,写的非常不错,学习了一下,这里做一些记录。一、GTM介绍GTM(GlobalTrafficManager的简写)即全局流量管理,基于网宿智能DNS、分布式监控体系,实现实时故障切换及全球负载均衡,保障应用服务的持续高可用性。GTM基于资源的健康状况及流量负载做智能调度决策,为用户提供最佳访问IP。网宿GTM,提供更可靠、稳定和安全的流量调度服务,助您轻松…

  • 守护线程和非守护线程_java守护线程的作用

    守护线程和非守护线程_java守护线程的作用Java中有两类线程:UserThread(用户线程)、DaemonThread(守护线程)用户线程即运行在前台的线程,而守护线程是运行在后台的线程。守护线程作用是为其他前台线程的运行提供便利服务,而且仅在普通、非守护线程仍然运行时才需要,比如垃圾回收线程就是一个守护线程。当VM检测仅剩一个守护线程,而用户线程都已经退出运行时,VM就会退出,因为没有如果没有了被守护这,也就没有继续运行程…

    2022年10月15日
  • leetcode-167两数之和(双指针+二分)

    leetcode-167两数之和(双指针+二分)原题链接给定一个已按照 升序排列 的整数数组 numbers ,请你从数组中找出两个数满足相加之和等于目标数 target 。函数应该以长度为 2 的整数数组的形式返回这两个数的下标值。numbers 的下标 从 1 开始计数 ,所以答案数组应当满足 1 <= answer[0] < answer[1] <= numbers.length 。你可以假设每个输入只对应唯一的答案,而且你不可以重复使用相同的元素。示例 1:输入:numbers = [2,7,11,15], targ

  • python文件句柄_Python 文件操作学习 就是这么简单!-文件句柄

    python文件句柄_Python 文件操作学习 就是这么简单!-文件句柄一、前言Python对文件的操作是相当简单的。二、文件操作函数的介绍Python通过open函数来打开文件,语法如下open(file,mode=‘r’,buffering=None,encoding=None,errors=None,newline=None,closefd=True)可以看到,除了第一个file参数是必须的,其它都是可选的。1、file:操作的文件2、mode:操…

    2022年10月18日

发表回复

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

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