乐趣区

关于vue3:向着Vue3进发Vue27升级指南

jiezi

北京工夫 7 月 1 号，Vue2.7 正式公布，Vue2.7 反对你的我的项目在不降级 Vue3 的状况下应用 Vue3 的个性，例如 Composition Api、setup、Css v-bind 等。

与此同时，Vue2.7 也是 Vue2.X 的最终主要版本，在这个版本之后，Vue2 将进入 LTS（长期反对），即从当初开始继续 18 个月，Vue2 将不再接管新性能。

对于一些老我的项目来说，当降级 Vue3 老本过大而你又垂涎 Vue3 新的 api 和代码组织形式时，那 Vue2.7 无疑是最佳抉择，这能够让还在应用 Vue2 的同学更好的学习并过渡到 Vue3。

接下来笔者将以一个 Vue2 的我的项目，将其降级到 Vue2.7 并记录该过程，欢送感兴趣的小伙伴浏览。

降级前版本：vue: 2.6.14，vue-cli: 4.0.0

一、删除 node_modules 和 package-lock.json

为了确保咱们前面降级的依赖版本是正确的，在一开始时咱们间接先将我的项目的 node_modules 和 package-lock.josn 删除，避免出现各种缓存问题。

二、降级过程

1. vue-cli 脚手架降级

当初咱们先依照要求降级脚手架的版本，Vue2.7 对于要求 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",
  }
}

    2. vue 版本升级 

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

3. @vue/composition-api

有些人可能曾经在 Vue2 的我的项目应用上了 @vue/composition-api，这时你须要将我的项目中所用到的导入更新为 vue:

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

但 @vue/composition-api 里的一些 API，如 createApp，并未齐全在 Vue2.7 里移植，所以如果你用到了这些 API，那还是应用持续应用 @vue/composition-api，若你用到的 API 都是 Vue2.7 里有的，则能够将 @vue/composition-api 从依赖中删去了。

三、应用

通过下面的改变后，当初能够重新安装依赖并运行起来了，接着就能够品味 Vue3 的新写法了。

<template>
  <div>
    <el-button @click="decrease">-</el-button>
    <el-button>{{count}}</el-button>
    <el-button @click="increase">+</el-button>
  </div>
</template>

<script setup>
import {ref} from 'vue'

let count = ref(1)

const decrease = () => {count.value--}

const increase = () => {count.value++}
</script>

另外，Vue2.7 反对在模板表达式中应用 ESNext 语法，这意味着能够在 template 里应用可选链了，以往在 Vue2 中，template 里并不反对可选链写法，当初在 Vue2.7 里的 template 中则能够欢快的应用可选链了 

<template>
  <div>
    {{userInfo?.name}}
  </div>
</template>

<script setup>
import {ref} from 'vue'

let userInfo = ref(null)
</script>

四、eslint 问题

在下面的代码中，会呈现 Eslint 未应用变量的谬误提醒。

解决这个问题咱们须要将 eslint-plugin-vue 版本升级到 9 +

npm i eslint-plugin-vue@9.0.0 -D
退出移动版