美文网首页
vue-cli升级5.x,支持ts和vue2.7踩坑

vue-cli升级5.x,支持ts和vue2.7踩坑

作者: mudssky | 来源:发表于2023-08-22 17:24 被阅读0次

vue-cli的升级体验还是不错的,基本上大部分迁移的工作都帮你处理完了。

升级vue-cli 5

首先全局安装最新版vue-cli
目前最新版是5.08,而且应该早就不怎么维护了,毕竟现在都用vite创建项目了。

npm install -g @vue/cli

可以先看一下安装的版本对不对

vue --version

执行升级

vue upgrade

会帮你把相关的依赖升级到最新
比如我这里是升级了这几个

  "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",

各种配置文件都帮你处理好了,升级完,基本上没什么报错。

02.升级vue 2.7

直接升级vue3是不可能的,而且也没什么必要。因为老项目的大部分代码都是vue2,此时升级到vue2.7是比较合适的。
支持setup相关的语法,而且和vue2基本上是兼容的。
对typescript的支持也更好

还有,我明显感觉到vue2.7以下的版本已经没什么必要用了,就像react的class写法,应该弃用了,vue2.7提供vue3相似的api还是很不错的。

03.添加typescript

vue2的项目,没几个人会用ts的。但是一旦用习惯了ts,我觉得再用js很难受。
主要是ts支持一些最新的特性,还有类型推断,
类型推断我尝试用jsdoc代替,但是我发现很麻烦,而且并没有ts好用。

写这种老项目,用一些js新特性都用不了,很难受,比如空值合并运算符??,在老项目里面就只能用||代替。

执行下面的命令,安装vue-cli的ts插件

vue add typescript

按照提示选择就行。
其中有一项是把你所有的js转为ts,我这里选择不转,除非这个项目的代码你都很熟悉,不建议用这个,会出现一大堆ts报错。。。

之后我们需要在tsconfig里面添加下面的配置,这样就可以在ts中导入js不报错,
也不用定义声明文件。。。

 "allowJs": true,
    "checkJs": false,

相关文章

  • vue-cli项目mock发送post请求超时

    vue-template项目(采用mock模拟数据)脚手架vue-cli升级到5.X版本,更改devServer基...

  • vue-cli升级踩坑记

    一段时间没有用vue,其脚手架已经更新到2.9.3,使用新的vue-cli构建项目,生成的目录和之前的不太一样,这...

  • ts踩坑记录

    错误信息 TS7053 解决方法1: 在tsconfig.json中配置suppressImplicitAnyIn...

  • Vue踩坑实录(二)

    在上一篇中说了一下踩过的前三个坑,剩下的坑就在这篇中全部搞定吧。Vue踩坑实录(一) Vue-cli .js?.V...

  • ES6 in NodeJS 5.x

    NodeJS 升级到5.x了, 对ES6的支持提高了很多, 详情见 ECMAScript 2015 (ES6)支持...

  • CentOS 6/7 升级GCC/G++至5.x版本

    CentOS 6/7 升级GCC/G++至5.x版本 ubuntu 14.04 升级GCC/G++至5.x版本

  • Vue-cli 踩坑

    记录Vue-cli时遇到的问题,方便大家寻找 搭建 如果遇到网络问题使用阿里镜像 npm config set r...

  • Android gradle 插件升级和 kts 迁移踩坑指南

    本文主要分享了 Android gradle 插件升级和 kts 迁移的相关知识和踩坑点。有个前置知识是依赖管理,...

  • AndroidX升级踩坑

    一、AndroidX介绍 鉴于Android support包版本依赖混乱,对实际开发不是很友好,经常出现依赖包重...

  • 升级cocoapods踩坑

    最近用的好好地cocoapods突然出了问题!!!记录一下在执行pod update时,报以下的错! [!] Fa...

网友评论

      本文标题:vue-cli升级5.x,支持ts和vue2.7踩坑

      本文链接:https://www.haomeiwen.com/subject/xmyumdtx.html