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. import ElementPlus from 'element-plus' 
2. import 'element-plus/lib/theme-chalk/index.css' 
3.  
4. export default (app: any) => { 
5.  app.use(ElementPlus) 
6. } 

src/main.ts

1. import router from './router' 
2. import store from './store' 
3. import App from './App.vue' 
4. import { createApp } from 'vue' 
5. import installElementPlus from './plugins/element' 
6. const app = createApp(App) 
7. installElementPlus(app) 
8. app.use(store).use(router).mount('#app') 

在页面中加一个按钮

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

在新版的vue3.x版本中还保留了原有的生命周期函数

1. created(){ 
2.  this.$message("message") 
3. }, 

打印了一下this

更新补充:

element-plus按需引入

src/plugins/element.ts

1. import { Button, Message } from 'element-plus' 
2.  
3. export default (app) => { 
4.  app.use(Button) 
5.  app.use(Message) 
6. } 

babel.config.js

1. module.exports = { 
2.  "presets": [ 
3.   "@vue/cli-plugin-babel/preset" 
4.  ], 
5.  "plugins": [ 
6.   [ 
7.    "component", 
8.    { 
9.     "libraryName": "element-plus", 
10.     "styleLibraryName": "theme-chalk" 
11.    } 
12.   ] 
13.  ] 
14. } 

在vue3.0 setup中使用

1. import { setup } from 'vue-class-component' 
2. import { getCurrentInstance } from 'vue' 
3. export default { 
4.  name: 'App', 
5.  components: { 
6.  
7.  }, 
8.  setup(e){ 
9.   const {ctx} = getCurrentInstance() 
10.   ctx.$message("mesage") 
11.  } 
12. } 

官方文档已更新: 点击跳转

到此这篇关于element-plus一个vue3.xui框架(element-ui的3.x 版初体验)的文章就介绍到这了,更多相关element-plus vue3.xui框架内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://blog.csdn.net/weixin_47731144/article/details/109487204