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页面刷新,数据丢失的问题
Nov 24 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue实现登陆页面开发实践
May 30 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
php在线打包程序源码
2008/07/27 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Django中create和save方法的不同
2019/08/13 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
python3字符串输出常见面试题总结
2020/12/01 Python
详解Python中的文件操作
2021/01/14 Python
工程材料采购方案
2014/05/18 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
地道战观后感2000字
2015/06/04 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
React配置子路由的实现
2021/06/03 Javascript
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python