更新项目vue版本--入门篇

        今天想用下ElementPlus的Form表单，结果给我 Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.  这样一个警告

        出现这个警告跟vue版本有关，于是决定升级vue，执行npm update vue

        之前的警告没了。又出现 Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaki 的问题

        在vite.config.js文件中修改如下

export default defineConfig({
  plugins: [vue()],
  define: {
      // enable hydration mismatch details in production build
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
    }
})

        没有出现新的问题了。不过我查看package.json文件，vue和vite的版本没有更新。

        

查看vue版本

npm list vue

npm list vue version

npm info vue (详细查看vue版本号)

npm view vue version(简单查看vue版本号) 

        通过以上命令查看vue版本都显示了更新后的版本，项目运行又没有出错，估计是package.json不会自动更新

        安装 npm install npm-check-updates -g

‌npm-check-updates是一款实用工具，专门用于更新项目中的package.json文件依赖至最新版本。‌ 

        安装过后执行2步，1.ncu（检查最新版本），2.ncu -u（更新到最新版本），然后查看package.json,已更新到最新版本

        注意不能单更新vite，vite和vue需要匹配

        如果npm install报peer冲突错误，那么可以执行npm install --legacy-peer-deps