element-plus 一个vue3.xUI框架 element-ui的3.x 版初体验


突然发现已经半年没更新的element-ui更新了
在这里插入图片描述
更新了什么还不清楚，但是告知了基于vue3.x版本的 element-plus 已经出来了。
在这里插入图片描述
先来上手体验一下
首先安装一个最新的@vue-cli，搭建一个vue3.x的项目，脚手架创建流程已经很简洁了，这里就不多说了。建好之后，直接开始安装吧

1
npm i element-plus

为了方便，直接采取全部引入的方式

src/plugins/element.ts

1
2
3
4
5
6
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default (app: any) => {<!-- -->
  app.use(ElementPlus)
}

src/main.ts

1
2
3
4
5
6
7
8
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')

在页面中加一个按钮

1
<el-button type="primary">el-button</el-button>

在这里插入图片描述
在新版的vue3.x版本中还保留了原有的生命周期函数

1
2
3
created(){<!-- -->
  this.$message("message")
},

在这里插入图片描述
打印了一下this
在这里插入图片描述

vue3.x 新出的函数中暂时还未发现如何去调用，等element-plus正式版出来之后在看看