vue項(xiàng)目element?UI?版本升級(jí)過(guò)程遇到的問(wèn)題及解決方案
vue項(xiàng)目element UI 版本升級(jí)過(guò)程遇到的問(wèn)題
最近發(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：
參見(jiàn)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);
遇到的問(wèn)題
1 一開(kāi)始打開(kāi)項(xiàng)目 關(guān)于舊版本的element ui界面 直接卡死 打不開(kāi)
查閱很多資料后發(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問(wèn)題 不能使用index 因?yàn)橄喈?dāng)于沒(méi)有使用。
這里很懵，不是說(shuō) key保證唯一即可嗎 為啥不能使用index作為key的值了 我這里嘗試兩種辦法都可奏效
- 1 直接刪除，不使用key（不建議使用，違背了虛擬dom的diff算法原則）
- 2 按照它說(shuō)的 使用一個(gè)唯一的id值作為key的值
4 重新打開(kāi)項(xiàng)目 發(fā)現(xiàn)都可以使用 但是有些圖標(biāo)不可見(jiàn) 比如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)文章
Vant picker 多級(jí)聯(lián)動(dòng)操作
這篇文章主要介紹了Vant picker 多級(jí)聯(lián)動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue報(bào)錯(cuò)error:0308010C:digital?envelope?routines::unsupported
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)error:0308010C:digital?envelope?routines::unsupported的解決方法,文中通過(guò)圖文將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件
這篇文章主要為大家詳細(xì)介紹了如何基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了IE9 elementUI文件上傳的問(wèn)題解決，有需要了解IE9 elementUI文件上傳的朋友可參考。希望此文章對(duì)各位有所幫助2018-10-10
這篇文章主要介紹了vue日志之如何select選中默認(rèn)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue項(xiàng)目中如何使用video.js實(shí)現(xiàn)視頻播放與視頻進(jìn)度條打點(diǎn)
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何使用video.js實(shí)現(xiàn)視頻播放與視頻進(jìn)度條打點(diǎn)的相關(guān)資料,video.js是一款基于HTML5的網(wǎng)絡(luò)視頻播放器,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)
這篇文章主要介紹了vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了精讀《Vue3.0 Function API》，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
為了給Vue一個(gè)提示,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下2022-05-05
vue3+vite+ts使用require.context問(wèn)題
這篇文章主要介紹了vue3+vite+ts使用require.context問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05