vue項目element UI 版本升級過程遇到的問題

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

查閱資料 升級element ui

直接在終端運行

• 首先卸載舊版本： 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 一開始打開項目 關于舊版本的element ui界面 直接卡死 打不開

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

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

2 升級之后還是報錯 vue-template-compiler提示不兼容

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

3 升級之后 再次重啟項目 還是報錯：

(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 因為相當于沒有使用。

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

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

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

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

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

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

結(jié)果：

總結(jié)

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

最新評論