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


Posted in Vue.js onDecember 02, 2020

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

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

更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。

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

先来上手体验一下
首先安装一个最新的@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>

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

在新版的vue3.x版本中还保留了原有的生命周期函数

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

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

打印了一下this

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

更新补充:

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")
 }
}

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

到此这篇关于element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)的文章就介绍到这了,更多相关element-plus vue3.xUI框架内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 #Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 #Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 #Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 #Vue.js
vue实现表格合并功能
Dec 01 #Vue.js
vue element实现表格合并行数据
Nov 30 #Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 #Vue.js
You might like
用缓存实现静态页面的测试
2006/12/06 PHP
PHP计数器的实现代码
2013/06/08 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python实现端口检测的方法
2018/07/24 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python 如何设置守护进程
2020/10/29 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
英语自荐信范文
2013/12/11 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
何玥事迹观后感
2015/06/16 职场文书
详解Python常用的魔法方法
2021/06/03 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS