vue2.x项目升级到2.7

背景

• 老代码库了，但是升级到v3的话成本比较大，准备先升级到2.7，用上compositon-api，后续再引入ts，慢慢改过来。

改动点

// package.json
{
  ...
  "vue": "^2.7.0",
  ...
  "vue-template-compiler": "^2.6.10", // 移除掉，用不上了
  "vue-loader": "^15.10.0", // 官方文档说是要加
  "vue-demi": "^0.13.1", // 官方文档说要加的，没加好像也没影响
  "eslint-plugin-vue": "^9.0.0", // 大于9才能支持script setup写法
  ...
}

vuex的改造

// 之前都是mapState、mapAction来用，现在可以换成下面这样
import store from '@/stores/index';

const info = computed(() => store.state.info);
const setInfo = () => store.dispatch('setInfo'); // mutation就是commit('setInfo'); action就是dispatch('setInfo');

ts的配置项

• 安装依赖

  npm i typescript@4.8.4 --save-dev
  npm i ts-loader@5.3.0 --save-dev
  npm i @vue/cli-plugin-typescript@3.1.1 --save-dev
  

• 添加tsconfig.json

  {
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "jsxFactory": "h",
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "forceConsistentCasingInFileNames": true,
      "sourceMap": true,
      "baseUrl": ".",
      "types": [
        "webpack-env"
      ],
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }
  

• 增加webpack配置

  ...
    resolve: {
      extensions: ['.ts', '.tsx', '.vue', '.js', '.json'],
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: { appendTsSuffixTo: [/\.vue$/] },
          exclude: /node_modules/,
        },
      ],
    },
...

• 如果项目中配置了eslint-loader，还需要安装 @typescript-eslint/parser，@typescript-eslint/eslint-plugin两个依赖包，然后修改原有的.eslintrc.js中的配置，否则可能会出现在进行eslint校验时，无法正确解析vue文件中的ts语法。

{
    ...
    parserOptions: {
        parser: '@typescript-eslint/parser', // 使用 @typescript-eslint/parser 作为解析器
    },
    plugins: ["@typescript-eslint"], // 添加 @typescript-eslint 插件
    ...
}

小结

• 目前就这样重新装一下包就能跑起来了，也能正常使用2.7的hooks写法了，也能使用ts写法了。