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 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
php计算函数执行时间的方法
2015/03/20 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python argparse模块使用方法解析
2020/02/20 Python
python 模拟登陆github的示例
2020/12/04 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
翻译专业应届生求职信
2013/11/23 职场文书
求职毕业生自荐书
2014/02/08 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
初中数学教学反思范文
2016/02/17 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
Go语言编译原理之源码调试
2022/08/05 Golang