vue2.x版本升级2.7版本

2022年7月1日，vue正式迎来2.7版本，代号：“Naruto”。支持 Composition API + <script setup> 。原文链接

也就是说，你可以在2.7版本直接使用 setup 语法糖，不需要借助任何 插件 和 loader ，第三方包。

升级迁移

本文章将介绍： vue-cli手脚架 创建的项目从 2.x 版本升级到 2.7 版本。

• 更新package.json文件

// package.json
{
  "dependencies":{
    // "vue": "^2.6.11"  直接修改成 2.7.0
    "vue": "^2.7.0"
  },
  "devDependencies":{
    "@vue/cli-plugin-babel": "~5.0.0", // 所有开发依赖 @vue/cli-xxx 升级5.0.0版本
    "@vue/cli-plugin-eslint": "~5.0.0", 
    "@vue/cli-service": "~5.0.0",
    "eslint-plugin-vue":"^9.0.0", // 升级 eslint 避免在代码检查中抛出错误
    // "vue-template-compiler": "^2.6.11",  删除 在2.7版本不需要
    // "babel-eslint":"^10.1.0", 删除  需要替换成 @babel/eslint-parser
    "@babel/eslint-parser":"^7.5.0", // 新增 
    "vue-loader":"^15.10.0", // 新增
    "vue-demi":"^0.13.1",// 新增
  },
  "eslintConfig":{
    // ...
    "parserOptions":{
      "parser": "@babel/eslint-parser" // 由 babel-eslint  替换 @babel/eslint-parser
    }
  }
}

• 删除node_modules文件夹 重新安装npm i

D:\your_project> npm i #or cnpm i  yarn install

• 现在可以在vue文件中使用script setup 和 Composition API

<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="add">click me</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0)
const add = ()=>{
  count.value += 1
}
</script>