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修改默认的最快方法
Dec 05 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue css 相对路径导入问题级踩坑记录
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
php GeoIP的使用教程
2011/03/09 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
详解Vue项目中实现锚点定位
2019/04/24 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python的socket编程入门
2018/01/29 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
2015年毕业生实习评语
2015/03/25 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
宝塔更新Python及Flask项目的部署
2022/04/11 Python