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文件
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
bash
D:\your_project> npm i #or cnpm i yarn install- 现在可以在vue文件中使用
script setup 和 Composition API
html
<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>