快捷導(dǎo)航

element-plus一個vue3.xUI框架(element-ui的3.x 版初體驗)

更新時間：2020年12月02日 09:41:08 作者：前端源

這篇文章主要介紹了element-plus一個vue3.xUI框架(element-ui的3.x 版初體驗),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

突然發(fā)現(xiàn)已經(jīng)半年沒更新的element-ui更新了

在這里插入圖片描述

更新了什么還不清楚，但是告知了基于vue3.x版本的 element-plus 已經(jīng)出來了。

在這里插入圖片描述

先來上手體驗一下
首先安裝一個最新的@vue-cli，搭建一個vue3.x的項目，腳手架創(chuàng)建流程已經(jīng)很簡潔了，這里就不多說了。建好之后，直接開始安裝吧

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版本中還保留了原有的生命周期函數(shù)

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

官方文檔已更新: 點擊跳轉(zhuǎn)

到此這篇關(guān)于element-plus一個vue3.xUI框架(element-ui的3.x 版初體驗)的文章就介紹到這了,更多相關(guān)element-plus vue3.xUI框架內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: