vue項(xiàng)目element?UI?版本升級(jí)過程遇到的問題及解決方案

更新時(shí)間：2023年01月21日 09:25:03 作者：￡白晝の星☆

這篇文章主要介紹了vue項(xiàng)目element?UI?版本升級(jí)過程遇到的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目element UI 版本升級(jí)過程遇到的問題

最近發(fā)現(xiàn)項(xiàng)目的element ui 版本是2.5 而最新的版本已經(jīng)是2.15所以想要更新一下element ui的版本

查閱資料升級(jí)element ui

直接在終端運(yùn)行

首先卸載舊版本： npm uninstall element-ui
安裝最新版本: npm install element-ui -S

全局引入 element ui：

參見element ui官方網(wǎng)站：Element - The world's most popular Vue UI framework

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

遇到的問題

1 一開始打開項(xiàng)目關(guān)于舊版本的element ui界面直接卡死打不開

查閱很多資料后發(fā)現(xiàn)：

vue版本與element ui的版本相關(guān)：如果vue版本在2.5.10之下你的elementui版本就不可高于2.7
這里還需要將 vue的版本升級(jí)為2.6.10.
執(zhí)行：npm install vue@2.6.10 升級(jí)vue版本

2 升級(jí)之后還是報(bào)錯(cuò) vue-template-compiler提示不兼容

這里我們還需要將 vue-template-compiler的版本升級(jí)：
執(zhí)行命令：npm i vue-template-compiler@2.6.10

3 升級(jí)之后再次重啟項(xiàng)目還是報(bào)錯(cuò)：

(Emitted value instead of an instance of Error) Do not use v-for index as key on <transition-group> children, this is the same as not using keys.

百度翻譯：發(fā)現(xiàn)是 v-for的key問題不能使用index 因?yàn)橄喈?dāng)于沒有使用。

這里很懵，不是說 key保證唯一即可嗎為啥不能使用index作為key的值了我這里嘗試兩種辦法都可奏效

1 直接刪除，不使用key（不建議使用，違背了虛擬dom的diff算法原則）
2 按照它說的使用一個(gè)唯一的id值作為key的值

4 重新打開項(xiàng)目發(fā)現(xiàn)都可以使用但是有些圖標(biāo)不可見比如el-dialog右上角的對(duì)話框的關(guān)閉按鈕

檢查樣式發(fā)現(xiàn)：

項(xiàng)目中有用到自定義的element ui樣式直接改為現(xiàn)在最新版本的element ui圖標(biāo)樣式即可

找的樣式改為 content: "\E6DB";

結(jié)果：

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue-cli 使用axios的操作方法及整合axios的多種方法
這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法，小編一一給大家列出來了，大家根據(jù)自身需要選擇，需要的朋友可以參考下
2018-09-09
Vue實(shí)現(xiàn)定位并解決內(nèi)存泄漏
Vue.js?是一個(gè)流行且強(qiáng)大的?JavaScript?框架,它允許我們構(gòu)建動(dòng)態(tài)和交互式?Web?應(yīng)用程序,本文我們將深入探討?Vue.js?應(yīng)用程序中內(nèi)存泄漏的原因,并探索如何定位和修復(fù)這些問題的有效策略,希望對(duì)大家有所幫助
2023-09-09
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當(dāng)于一個(gè)全局的路由器對(duì)象,包含了很多屬性和對(duì)象（比如?history?對(duì)象）,任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧
2023-10-10
詳解Vue2.0之去掉組件click事件的native修飾
這篇文章主要介紹了詳解Vue2.0之去掉組件click事件的native修飾,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04
Vue監(jiān)聽localstorage變化的方法詳解
在日常開發(fā)中,我們經(jīng)常使用localStorage來存儲(chǔ)一些變量,這些變量會(huì)存儲(chǔ)在瀏覽中,對(duì)于localStorage來說,即使關(guān)閉瀏覽器,這些變量依然存儲(chǔ)著,方便我們開發(fā)的時(shí)候在別的地方使用,本文就給大家介紹Vue如何監(jiān)聽localstorage的變化,需要的朋友可以參考下
2023-10-10
vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
vue請(qǐng)求數(shù)據(jù)的三種方式
這篇文章主要介紹了vue請(qǐng)求數(shù)據(jù)的三種方式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Vue 中axios配置實(shí)例詳解
本文通過實(shí)例代碼給大家介紹了Vue axios配置,非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07
vue2.x引入threejs的實(shí)例代碼
這篇文章主要介紹了vue2.x引入threejs,如果在開發(fā)過程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-09-09
vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例
在后臺(tái)管理系統(tǒng)，可以根據(jù)登錄用戶的不同返回不同路由，頁面也會(huì)根據(jù)這些路由生成對(duì)應(yīng)的菜單，本文主要介紹了vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例，感興趣的可以了解一下
2024-04-04