亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何在Vue3中正確使用ElementPlus,親測有效,避坑

 更新時間：2024年03月20日 17:19:21   作者：于弋gg  
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測有效,避坑！具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、創(chuàng)建Vue3項(xiàng)目

vue  create  vue_element

選擇自定義項(xiàng)目創(chuàng)建：

選擇這幾項(xiàng)（空格選擇）

后面的幾項(xiàng)全部回車，這里就不做介紹了，大膽回車就行，出了事算我的，除非你有特殊需求。

（下面是安裝成功后的圖片）

二、進(jìn)入項(xiàng)目,安裝Element-Plus

（1）我這里用的是WebStorm，在命令行中執(zhí)行下面代碼安卓Element-Plus：

npm install element-plus --save

（2） 在main中配置Element-Plus：

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

到這里，Element-Plus里面的控件你都可以使用了。

后面講介紹，如何使用ElementPlus中的Icon控件的配置。

三、配置Icon

（1）在終端執(zhí)行下面代碼進(jìn)行安裝：

npm install @element-plus/icons-vue

（2）在main中進(jìn)行配置

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(router).use(ElementPlus).mount('#app')

這樣就可以使用所有ElementPlus配件了

四、測試運(yùn)行

（1） 配置一個編譯器

(2) 隨便找一個ElementPlus用一下子看看。

拿他試一下，直接把代碼復(fù)制到你的Vue就可以。

結(jié)果：

五、Git提交一下

總是報(bào)紅怎么辦？說明提示你修改了沒有提交到git里面。

有強(qiáng)迫癥的看一下。

git add . 后再git status看一下子，這樣之后就不報(bào)紅，并提交到git上面了，如果你要pull到github上，這里就不演示了，已經(jīng)有點(diǎn)跑題了。

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue批量注冊組件實(shí)現(xiàn)動態(tài)組件技巧

    Vue批量注冊組件實(shí)現(xiàn)動態(tài)組件技巧

    Vue 動態(tài)組件的應(yīng)用場景很多,可應(yīng)用于動態(tài)頁簽,動態(tài)路由等場景,其核心原理是批量注冊,在Vue2和Vue3中實(shí)現(xiàn)原理相同,只是語法略有差異,本文給大家介紹了Vue批量注冊組件實(shí)現(xiàn)動態(tài)組件技巧,需要的朋友可以參考下
    2024-11-11
  • 從Vue轉(zhuǎn)換看Webpack與Vite 代碼轉(zhuǎn)換機(jī)制差異詳解

    從Vue轉(zhuǎn)換看Webpack與Vite 代碼轉(zhuǎn)換機(jī)制差異詳解

    這篇文章主要為大家介紹了從Vue轉(zhuǎn)換看Webpack與Vite代碼轉(zhuǎn)換機(jī)制差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • Vue3配置代理后頁面500/404問題

    Vue3配置代理后頁面500/404問題

    這篇文章主要介紹了Vue3配置代理后頁面500/404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2025-04-04
  • uni-app中App與webview雙向?qū)崟r通信詳細(xì)代碼示例

    uni-app中App與webview雙向?qū)崟r通信詳細(xì)代碼示例

    在移動應(yīng)用開發(fā)中,uni-app是一個非常流行的框架,它允許開發(fā)者使用一套代碼庫構(gòu)建多端應(yīng)用,包括H5、小程序、App等,這篇文章主要給大家介紹了關(guān)于uni-app中App與webview雙向?qū)崟r通信的相關(guān)資料,需要的朋友可以參考下
    2024-07-07
  • 一文詳解Vue3中如何使用Vue?Router

    一文詳解Vue3中如何使用Vue?Router

    Vue-Router路由是根據(jù)不同的url地址展現(xiàn)不同的內(nèi)容或頁面,這篇文章主要給大家介紹了關(guān)于Vue3中如何使用Vue?Router的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-02-02
  • vue構(gòu)建單頁面應(yīng)用實(shí)戰(zhàn)

    vue構(gòu)建單頁面應(yīng)用實(shí)戰(zhàn)

    本篇文章主要介紹了vue構(gòu)建單頁面應(yīng)用實(shí)戰(zhàn)，使用 SPA，沒有頁面切換，就沒有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。
    2017-04-04
  • 關(guān)于VueRouter導(dǎo)入的全過程

    關(guān)于VueRouter導(dǎo)入的全過程

    這篇文章主要介紹了關(guān)于VueRouter導(dǎo)入的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • Element-UI Table組件上添加列拖拽效果實(shí)現(xiàn)方法

    Element-UI Table組件上添加列拖拽效果實(shí)現(xiàn)方法

    這篇文章主要為大家詳細(xì)介紹了Element-UI Table組件上添加列拖拽效果的實(shí)現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-04-04
  • vue Render中slots的使用的實(shí)例代碼

    vue Render中slots的使用的實(shí)例代碼

    本篇文章主要介紹了vue Render中slots的使用的實(shí)例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
    2017-07-07
  • Vue實(shí)現(xiàn)tab切換的兩種方法示例詳解

    Vue實(shí)現(xiàn)tab切換的兩種方法示例詳解

    這篇文章主要介紹了Vue實(shí)現(xiàn)tab切換的兩種方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-11-11

最新評論