北京工夫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