element-plus一個(gè)vue3.xUI框架(element-ui的3.x 版初體驗(yàn))
突然發(fā)現(xiàn)已經(jīng)半年沒更新的element-ui更新了
更新了什么還不清楚，但是告知了基于vue3.x版本的 element-plus 已經(jīng)出來了。
先來上手體驗(yàn)一下
首先安裝一個(gè)最新的@vue-cli，搭建一個(gè)vue3.x的項(xiàng)目，腳手架創(chuàng)建流程已經(jīng)很簡(jiǎn)潔了，這里就不多說了。建好之后，直接開始安裝吧
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')
在頁面中加一個(gè)按鈕
<el-button type="primary">el-button</el-button>
在新版的vue3.x版本中還保留了原有的生命周期函數(shù)
created(){
this.$message("message")
},
打印了一下this
更新補(bǔ)充:
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")
}
}
官方文檔已更新: 點(diǎn)擊跳轉(zhuǎn)
到此這篇關(guān)于element-plus一個(gè)vue3.xUI框架(element-ui的3.x 版初體驗(yàn))的文章就介紹到這了,更多相關(guān)element-plus vue3.xUI框架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue+Ts+Vite項(xiàng)目中配置別名指向不同的目錄并引用的案例詳解
這篇文章主要介紹了在Vue+Ts+Vite項(xiàng)目中配置別名指向不同的目錄并引用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用
本文主要介紹了Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法
下面小編就為大家分享一篇Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了基于vue+axios+lrz.js微信端圖片壓縮上傳方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突問題
這篇文章主要介紹了vue父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue頁面引入three.js實(shí)現(xiàn)3d動(dòng)畫場(chǎng)景操作
這篇文章主要介紹了vue頁面引入three.js實(shí)現(xiàn)3d動(dòng)畫場(chǎng)景操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了解決threeJS加載obj?gltf模型后顏色太暗的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue中通過使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞功能
組件之間傳遞數(shù)據(jù)的方式有很多種，之所以有這么多種方式，是為了滿足在不同場(chǎng)景不同條件下的使用。這篇文章主要介紹了vue中通過使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2019-09-09
隨著搬運(yùn)工的逐漸增加,原創(chuàng)作者的利益收到了極大的影響。所以給圖片或視頻加上水印顯得極其重要。本文分享一個(gè)由canvas和vue.js制作的圖片水印添加器，需要的可參考一下2022-06-06
Vue+Spring Boot簡(jiǎn)單用戶登錄(附Demo)
這篇文章主要介紹了Vue+Spring Boot簡(jiǎn)單用戶登錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11