vue2升级vue3

1.nisvue3升级工具

华为内源的一款升级工具，修复了较多vue-codemod,gogocode-vue升级工具的缺陷。

工具下载

# 1. 设置registry
npm config set @hw-ispa:registry https://cmc.centralrepo.rnd.huawei.com/artifactory/api/npm/product_npm/
# 2. 全局安装
npm install @hw-ispa/nisvue3 -g  # Vue3自动升级工具
npm install @hw-ispa/nisvue3-composition -g # Vue3组合式API转换工具, 可选

2.工具使用

nisvue3使用时需要一个配置文件的绝对路径当做参数，配置文件位置任意，文件内容如下, 需根据实际项目情况更改：

module.exports = {
  // 需要转换的工程的绝对路径
  transformPath: 'D:\\work\\project\\ispa-common-data-ui',
  // 需要转换的工程里的目录，有多个目录请添加
  transformDirectory: ['src'],
  // 转换结果的文件格式规则
  fileRules: {
    lineSeparator: '\r\n', // 换行符
    semicolon: true, // 结尾分号
    trailingComma: true, // 拖尾逗号
    quote: '\'', // 引号
    indent: 2 // 缩进
  },
  // 组合式API转换工具不需要配置，webpack import别名，需要使用这项配置纠正文件依赖关系（v-model、setup-plugin等规则需要用到），从工程webpack配置文件中取出设置
  alias: {
    '@': 'src'
  },
  compositionApiRules: { // 组合式API转换工具专属规则
    methodToArrowFunction: false // 设置为true将方法转换为箭头函数（无变量提升，函数定义先后顺序需手工修复），为false(默认)为函数声明，无需调整定义先后顺序
  }
}

打开命令提示符执行命令，-c后的路径参数为上述配置文件的绝对路径

nisvue3 -c D:\work2\2022\VUE3\testConfig.js # Vue3自动升级工具执行命令
niscomposition -c D:\work2\2022\VUE3\testConfig.js # Vue3组合式API转换工具执行命令, 可选

上述操作完成后，重新npm i一下之后运行，修复报错内容，即可！