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 07 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Django之form组件自动校验数据实现
2020/01/14 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
经典c++面试题五
2014/12/17 面试题
客服部班长工作责任制
2014/02/25 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
捐书仪式主持词
2015/07/04 职场文书
企业安全生产规章制度
2015/08/06 职场文书
聘用合同范本
2015/09/21 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书