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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue+Ts+Vite項目中配置別名指向不同的目錄并引用的案例詳解
這篇文章主要介紹了在Vue+Ts+Vite項目中配置別名指向不同的目錄并引用,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
本文主要介紹了Vue實現(xiàn)插槽下渲染dom字符串的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
下面小編就為大家分享一篇Vue2.0子同級組件之間數(shù)據(jù)交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了基于vue+axios+lrz.js微信端圖片壓縮上傳方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了vue父元素點擊事件與子元素點擊事件沖突問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue頁面引入three.js實現(xiàn)3d動畫場景操作
這篇文章主要介紹了vue頁面引入three.js實現(xiàn)3d動畫場景操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了解決threeJS加載obj?gltf模型后顏色太暗的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue中通過使用$attrs實現(xiàn)組件之間的數(shù)據(jù)傳遞功能
組件之間傳遞數(shù)據(jù)的方式有很多種，之所以有這么多種方式，是為了滿足在不同場景不同條件下的使用。這篇文章主要介紹了vue中通過使用$attrs實現(xiàn)組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2019-09-09
隨著搬運工的逐漸增加,原創(chuàng)作者的利益收到了極大的影響。所以給圖片或視頻加上水印顯得極其重要。本文分享一個由canvas和vue.js制作的圖片水印添加器，需要的可參考一下2022-06-06
這篇文章主要介紹了Vue+Spring Boot簡單用戶登錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11