持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天

前言

因为目前上手的项目有vue2的也有Vue3的。但是当用习惯了vue3的写法再用vue2难免会有些难受。也偶尔了解到过关于vue2.7的传说，可以在vue2项目的基础上使用vue3的部分写法。

所以就试试。

升级步骤

一，删除node_modules和package-lock.json

为了避免存在依赖缓存而带来的不必要的问题

二，vue-cli脚手架升级

如果你的vue-cli是v4版本，需要升级到~4.5.18； 如果你的vue-cli是v5版本，需要升级到~5.0.6；

// package.json
{
    "devDependencies": {
        // "@vue/cli-plugin-babel": "^4.0.0",
        // "@vue/cli-plugin-eslint": "^4.0.0",
        // "@vue/cli-service": "^4.0.0",
        // 修改为
        "@vue/cli-plugin-babel": "^4.5.18",
        "@vue/cli-plugin-eslint": "^4.5.18",
        "@vue/cli-service": "^4.5.18",
    }
}

三，vue版本升级

附代码如下：

// package.json
{
    "dependencies": {
        // "vue": "2.6.14",
        "vue": "2.7.0",
        // vue2.7 不再需要vue-template-compoler，所以可以将其删除
        // "vue-template-compiler": "2.6.14", 
    }
}

四，@vue/composition-api

如果在项目中用了@vue/composition-api，需要修改成vue。

// import { ref } from '@vue/composition-api'
import { ref } from 'vue'

不过有些属性例如createApp，并没有完全移植到vue2.7版本。所以如果要继续使用还是需要单独去引用@vue/composition-api。

使用

安装成功后就可以使用vue3的语法了。 主要的更新语法：

• 使用setup
• 可以使用组合式api（reactive 、ref 、watch ...）
• 还支持模板表达式中使用ESNext语法，template可以使用可选链
• defineComponent()  重载函数
• 等等。。

但是也有很多东西不能用，看到很多掘友说router，vuex，等使用不能完全按照vue3的写法。

踩坑

其实我的安装并不是很顺利，在切换版本后随即就发现了两个报错。 一个是依赖包报错：

还有一个是vue报错：

然鹅并不知道怎么解决，所以怎么说呢升级2.7这件事也没那么方便。也会遇到很多别的兼容性问题。我觉得如果是庞大的vue2项目还是用vue2.6吧。新的项目可以vue3。vue2.7劝退了呜呜呜