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

全栈程序员站长

发布于 2022-09-01 15:34:17

3.3K0

发布于 2022-09-01 15:34:17

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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

突然发现已经半年没更新的element-ui更新了

更新了什么还不清楚，但是告知了基于vue3.x版本的 element-plus 已经出来了。

先来上手体验一下首先安装一个最新的@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>

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

created(){ 
   
  this.$message("message")
},

打印了一下this

更新补充:

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")
  }
}

更新:ctx 打包之后无法调用$message，可以使用proxy

import { 
    getCurrentInstance } from 'vue'
export default { 
   
  name: 'App',
  components: { 
   

  },
  setup(){ 
   
    const { 
   proxy} = getCurrentInstance()
    proxy.$message("mesage")
  }
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141902.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript