element-plus一個(gè)vue3.xUI框架(element-ui的3.x 版初體驗(yàn))
突然發(fā)現(xiàn)已經(jīng)半年沒(méi)更新的element-ui更新了
更新了什么還不清楚，但是告知了基于vue3.x版本的 element-plus 已經(jīng)出來(lái)了。
先來(lái)上手體驗(yàn)一下
首先安裝一個(gè)最新的@vue-cli，搭建一個(gè)vue3.x的項(xiàng)目，腳手架創(chuàng)建流程已經(jīng)很簡(jiǎn)潔了，這里就不多說(shuō)了。建好之后，直接開(kāi)始安裝吧
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')
在頁(yè)面中加一個(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 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
VSCode開(kāi)發(fā)UNI-APP 配置教程及插件
uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，今天通過(guò)本文給大家分享VSCode開(kāi)發(fā)UNI-APP 配置教程及插件推薦與注意事項(xiàng)，感興趣的朋友一起看看吧2021-08-08
解決vue2.0動(dòng)態(tài)綁定圖片src屬性值初始化時(shí)報(bào)錯(cuò)的問(wèn)題
下面小編就為大家分享一篇解決vue2.0動(dòng)態(tài)綁定圖片src屬性值初始化時(shí)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本篇文章主要介紹了深入理解Vue 的條件渲染和列表渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue中filter的應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了vue中filter的應(yīng)用場(chǎng)景，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了在vue項(xiàng)目中如何加載markdown,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
vue的過(guò)濾器通常用在一些常見(jiàn)的文本格式化，過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。本文給大家介紹了web前端vue filter 過(guò)濾器的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-01-01
vue.js使用代理和使用Nginx來(lái)解決跨域的問(wèn)題
下面小編就為大家分享一篇vue.js使用代理和使用Nginx來(lái)解決跨域的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于vue3中defineEmits使用的相關(guān)資料,在Vue3中可以使用defineEmits函數(shù)來(lái)定義組件的自定義事件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
使用vue.js在頁(yè)面內(nèi)組件監(jiān)聽(tīng)scroll事件的方法
今天小編就為大家分享一篇使用vue.js在頁(yè)面內(nèi)組件監(jiān)聽(tīng)scroll事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09