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 18 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue如何清空对象
Mar 03 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
Vue深入理解插槽slot的使用
Aug 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
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
浅谈django model postgres的json字段编码问题
2018/01/05 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
python3.5绘制随机漫步图
2018/08/27 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
大学毕业感言
2014/01/10 职场文书
社区七一党员活动方案
2014/01/25 职场文书
爱耳日活动总结
2014/04/30 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
学校周年庆活动方案
2014/08/22 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
MySQL基础(二)
2021/04/05 MySQL
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js