vue2升级到vue2.7

为什么要升级Vue2.7

不能拒绝的理由:
组合式 API (解决mixins问题:命名冲突,隐式依赖)
单文件组件内的 <script setup> 语法
模板表达式中支持 ESNext 语法(可选链: ?. 、空值合并: ?? )
单文件组件内的 CSS v-bind
升级哪些内容

我项目中直接使用的webpack(只需升级下面两个包)

vue 升级到 ^2.7.0
"dependencies": {
    // "vue": "2.6.12"
    "vue": "^2.7.0"
vue-loader升级到 ^15.11.1 
"devDependencies": {
    //"vue-loader": "^15.7.0"
    "vue-loader": "^15.10.0"
如果你项目使用的vue-cli
 
 @vue/cli-xxx 将本地的 @vue/cli-xxx 依赖升级至所在主版本范围内的最新版本 (如有)： 
  v4 升级至 ~4.5.18
v5 升级至 ~5.0.6
vue 升级至 ^2.7.0
  
同时你可以从依赖中移除 vue-template-compiler——它在 2.7 中已经不再需要了。 
注意：如果你在使用 @vue/test-utils，那么 vue-template-compiler 需要保留，因为该测试工具集依赖了一些只有这个包会暴露的 API。 
 vue相关依赖 
  vue-loader: ^15.10.0
vue-demi: ^0.13.1
eslint-plugin-vue 至最新版本 (9+)
  
setup 中使用 vuex、vue-router
 
由于项目版本 vuex、vue-router 均为 v3，组合式 API 中，我们需要使用一些新的函数来代替访问 this等方法，如：this.$store、this.$router、this.$route。
 解决方案：也用到了 getCurrentInstance，通过它封装一些方法使用。 
vue2.7-composition-helpers.js 
import { getCurrentInstance } from 'vue'
export function useStore() {
  const { proxy } = getCurrentInstance()
  const store = proxy.$store
  return store
export function useRoute() {
  const { proxy } = getCurrentInstance()
  const route = proxy.$route
  return route
export function useRouter() {
  const { proxy } = getCurrentInstance()
  const router = proxy.$router
  return router
第三方库 element ui
 
同样我们第三方库的方法,比如: this.$message等方法也不能使用了,这里也放到上面的工具js中. 
 * 升级vue2.7辅助函数
import { getCurrentInstance } from 'vue'
/** this.$store替换方案 */
export function useStore() {
  const { proxy } = getCurrentInstance()
  const store = proxy.$store
  return store
/** this.$route替换方案 */
export function useRoute() {
  const { proxy } = getCurrentInstance()
  const route = proxy.$route
  return route
/** this.$router替换方案 */
export function useRouter() {
  const { proxy } = getCurrentInstance()
  const router = proxy.$router
  return router
/** this.$message方法替换方案 */
export function useMessage() {
  const { proxy } = getCurrentInstance()
  const message = proxy.$message
  return message
/** this.$modal替换方案 */
export function useModal() {
  const { proxy } = getCurrentInstance()
  const modal = proxy.$modal
  return modal
深度选择器改写::v-deep、/deep/为:deep()
 
更新后，如果有::v-deep、/deep/相关的报错或者警告，需要改用:deep() 
<style scoped>
  .a :deep(.b) { /* ... */ }
</style>
eslint-plugin-vue 升级到 v9 以上
 
在使用 setup 语法糖的时候由于内部变量都是直接声明暴露给模板使用的，所以旧版 eslint 检测到会有未使用的变量的时候会报错 ‘unused…’ 
"devDependencies": {
    "eslint-plugin-vue": "^9.3.0"
与 Vue 3 的行为差异
 
❌ createApp() (Vue 2 不支持相互隔离的应用 scope)
 ❌ <script setup> 中的顶层 await (Vue 2 不支持异步组件初始化)
 ❌ 模板表达式中的 TypeScript 语法 (与 Vue 2 parser 不兼容)
 ❌ 响应性语法糖 (仍处于试验阶段)
 ❌ 选项式组件不支持 expose (但是在 <script setup> 中支持 defineExpose())。
				SpringBlade 是一个由商业级项目升级优化而来的微服务架构，采用Spring Boot 2.7 、Spring Cloud 2021 等核心技术构建，完全遵循阿里巴巴编码规范。提供基于React和Vue的两个前端框架用于快速搭建企业级的SaaS多租户微服务平台。
https://gitee.com/dromara/lamp-cloud
lamp-cloud 基于Jdk11 + SpringCloud + SpringBoot 开发的微服务中后台快速开发平台，专注于多租户(SaaS架构)解决方案，亦可作为普通项目（非SaaS架构）的基础开发框架使用，目前已实现插拔式数据库隔离、SCHEMA隔离、字段隔离 等租户隔离方案。
https://gitee.com/y_project/RuoYi
基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用
https://gitee.com/zhijiantianya/ruoyi-vue-pro
1. 删除原有node_modules文件夹和package-lock.json，npm install vue@2.7.0
2. 如果有用到@vue/composition-api，vue-template-compiler，可以删掉
3. 如果有使用vite-plugin-vue2，请替换为@vitejs/plugin-vue2




    

				iView 2.7.0是一套基于Vue.js 的企业级UI组件库，主要服务于 PC 界面的中后台产品。高质量、功能丰富，友好的 API ，自由灵活地使用空间，需要的朋友可下载试试！
功能特性：
i18n 兼容 vue-i18n 6.x  版本，并支持通过 script 标签引入，完善国际化使用文档。
现在可以更好地按需加载组件了。
Form 验证方法 validate 支持 Promise
				vue-unitTest-with-jest
收录于ruanyf/weekly-
:party_popper::party_popper::party_popper: 进阶版已更新完成，建议零基础的看完基础篇再看进阶篇:party_popper::party_popper::party_popper:
任何教程都不会是完美的，如发现任何不足之处欢迎提issue，另外issue里面的笔记非常推荐阅读
该仓库目标是实现从零开始到单元测试无障碍的进阶。
列举了所有可能出现在vue项目中的，需要进行测试的项。可与实际项目中一一对应
本仓库内都是基础的测试用例，为了能更好理解，伪造的例子都比较简单。实际项目中需要在理解本仓库测试思路的前提下，根据项目实际情况写测试。
覆盖率是用来衡量代码质量的标准，越是复杂的项目要求的覆盖率越低。
本仓库内未进行测试的【router，第三方插件等】并不是绝对不需要测试，如果有单独对插件和router进行设置的话，设置部分是需要测试的。也就是说第三方插件本身我们默认是经过严密测试的，而我们添加的逻辑部分需要自己添加测试。
				bpmn.js与vue的完美整合，提供了设计器和查看器两个部分。
项目简介：
一个基于 `bpmn.js`，`Vue 2.x` 和 `ElementUI` 开发的流程设计器。本项目从原项目衍生出来，升级了最新版本的bpmnjs，并升级到了vue2.7，支持新特性。
您可以使用它在浏览器上查看和编辑符合 `BPMN 2.0` 规范的流程文件。还可以查看标准的流程文件。同时支持activiti，flowable和camunda。
1. 工具栏：包含常见操作，比如保存流程、打开文件、下载文件、预览、对齐方式、缩放管理、撤销删除等
2. 常规信息：id、名称、扩展属性、元素文档
3. 特殊节点属性：
   1. 流程全局消息与信号
   2. 执行监听器
   3. 用户任务节点 任务监听器
   4. 表单配置
   5. 任务配置
   6. 多实例任务
   7. 流转条件
4. 内置常用 `camunda` ，`flowable`，`activiti` 解析文件
5. 自定义左侧元素栏 `platte` 与弹出菜单 `contentPad` 示例模块
6. 自定义渲染方法
				Vue2.7和Vue3之间有几个主要的区别。首先，Vue2.7支持你在不升级到Vue3的情况下使用Vue3的特性，如Composition API、setup、Css v-bind等[1]。然而，不是所有@vue/composition-api的API都完全移植到Vue2.7中。如果你使用了@vue/composition-api的API，你仍然需要继续使用它。如果你只使用了Vue2.7中已经存在的API，你可以将@vue/composition-api从依赖中删除。
如果你已经在Vue2的项目中使用了@vue/composition-api，你需要将项目中所用到的导入更新为vue。
另外，升级到Vue2.7需要升级脚手架的版本。如果你的vue-cli是v4版本的，你需要将其升级到~4.5.18；如果你的vue-cli是v5版本的，你需要将其升级到~5.0.6。
此外，Vue2.7不再需要vue-template-compiler插件，所以你可以将其从依赖中删除。
综上所述，Vue2.7和Vue3之间的区别在于Vue2.7支持你在不升级Vue3的情况下使用Vue3的特性，但并不完全移植了@vue/composition-api的所有API。你仍然需要根据自己的项目需求来选择是否继续使用@vue/composition-api，并根据升级要求来升级脚手架和vue版本[4]。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
                安装element-ui后，运行报错ERROR in ./node_modules/element-ui/lib/element-ui.common.js Module not found: Erro
                    rain丶子厚: 
                    于是在档案外部的package.json增加配置,将正常throttle-debounce的版本配置新增到package.json？
                FinalShell下载安装教程
                    可爱不是长久之计: 
                    大佬，我FinalShell申请ssl安全证书，证书发了没保存，现在找不到了，怎么办啊，有办法补救么
                Sourcetree安装详细（最新版本）
                    前端蜗牛君: 
                    如果是文章中提到的报错,可以忽略;如果其他错误是否是因为网路问题,需要魔法.如果其他报错,可以把错误贴出来
                Sourcetree安装详细（最新版本）
                    PD南客: 
                    你是怎么解决那个安装失败的
                FinalShell下载安装教程
                    adv110: 
                    复制IP上去 说要登录密码是啥？