Element-ui升级到最新版 2.4.6

1,安装高效升级插件  npm install -g npm-check-updates

2,查看最新的版本:npm-check-updates   简写:ncu

3卸载之前的element-ui版本    npm uninstall element-ui

4安装最新版(想要安装的版本) npm install element-ui @2.4.6 -S

5替换三个文件

1.这时候我们在main.js中修改新增的 theme-chalk 主题:
将import 'element-ui/lib/theme-default/index.css'替换为import 'element-ui/lib/theme-chalk/index.css'

2.在.babelrc 文件中替换 theme-default -----》theme-chalk

3.在node_modules\babel-plugin-component\README.md文件中替换 theme-default-----》theme-chalk

另:

1 npm unstall element-ui 

2 npm i element-ui -S


3 将import 'element-ui/lib/theme-default/index.css'替换为import 'element-ui/lib/theme-chalk/index.css'

单独升级element ui 可能与原工程某些写法不兼容造成渲染差异,假如不升级element ui自身bug不少,比如checkbox之类的无法渲染默认选中或无法多选等等

是否要依赖都升级,看具体情况

F:\springboot\fw\tongbu\foxvue>ncu -u
Using F:\springboot\fw\tongbu\foxvue\package.json
[..................] / :
 axios                               ^0.15.3  →        ^0.18.0
 query-string                         ^4.2.3  →         ^6.1.0
 vee-validate                 ^2.0.0-beta.17  →  ^2.1.0-beta.8
 vuex                            ^2.0.0-rc.6  →         ^3.0.1
 autoprefixer                         ^6.4.0  →         ^9.1.3
 babel-eslint                         ^7.1.1  →         ^9.0.0
 babel-loader                         ^6.2.8  →         ^8.0.1
 chalk                                ^1.1.3  →         ^2.4.1
 css-loader                          ^0.26.0  →         ^1.0.0
 eslint                              ^3.12.2  →         ^5.5.0
 eslint-loader                        ^1.6.1  →         ^2.1.0
 eslint-plugin-vue                    ^1.0.0  →         ^4.7.1
 extract-text-webpack-plugin          ^1.0.1  →         ^3.0.2
 file-loader                          ^0.9.0  →         ^2.0.0
 html-webpack-plugin                  ^2.8.1  →         ^3.2.0
 http-proxy-middleware               ^0.17.2  →        ^0.19.0
 opn                                  ^4.0.2  →         ^5.3.0
 ora                                  ^0.3.0  →         ^3.0.0
 shelljs                              ^0.7.4  →         ^0.8.2
 url-loader                           ^0.5.7  →         ^1.1.1
 vue-loader                           ^9.9.5  →        ^15.4.1
 vue-router                           ^2.0.3  →         ^3.0.1
 vue-style-loader                     ^1.0.0  →         ^4.1.2
 webpack                             ^1.13.2  →        ^4.17.1
 webpack-dev-middleware               ^1.8.3  →         ^3.2.0
 webpack-merge                       ^0.17.0  →         ^4.1.4
Upgraded F:\springboot\fw\tongbu\foxvue\package.json

根据引用,Vue项目中的element-ui版本需要从1.xx.x升级到2.15.7。为了升级,您可以参考引用,将原来的样式导入语句`import 'element-ui/lib/theme-default/index.css'`替换为`import 'element-ui/lib/theme-chalk/index.css'`。 然而,请注意引用提到,单独升级element-ui可能会与原工程的某些写法不兼容,导致渲染差异。同时,如果不升级element-ui,可能会遇到一些element-ui自身的bug,例如checkbox无法渲染默认选中或无法多选等问题。 因此,升级element-ui版本前,建议您先了解原工程的代码,确保升级不会影响现有的功能和样式。如果有必要,还需要进行相应的调整和测试,以确保升级后的版本能够正常工作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [1. Vue项目中element-ui版本进行升级](https://blog.csdn.net/m0_59376721/article/details/126731034)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Element-ui升级最新版 2.4.6](https://blog.csdn.net/luozhonghua2014/article/details/82317281)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luozhonghua2000

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值