在vue2项目中支持ts语法的使用，脚手架版本5.x

需求

在vue2项目中支持ts语法的使用
本文使用的环境：
脚手架版本5.0
node版本：18.9.0

配置过程

1. 安装依赖：

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript vue-eslint-parser --D

2. 在项目根目录创建tsconfig.json文件

{
    "compilerOptions": {
        "module": "esnext",
        "target": "es5",
        "jsx": "preserve",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        // 用于指定是否启用实验性的装饰器特性
        "experimentalDecorators": true
    },
    "allowJs": true,
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

3. 在vue.config.js中配置

// 全局变量配置
    chainWebpack: (config) => {
        // 添加后缀拓展引入支持
        config.resolve.extensions.add('.ts').add('.tsx');
        config.module
            .rule('ts')
            .test(/\.(ts|tsx)$/)
            .use('ts-loader')
            .loader('ts-loader')
            .options({
            	// 配置能够识别vue中的ts
                appendTsSuffixTo: [/\.vue$/]
            })
            .end();
    },

4. 配置eslint支持ts，在eslintrc.js中配置

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended'],
    // 使用vue-eslint-parser避免报错 ‘>’
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: {
            // 根据不同使用不同的编译
            js: '@babel/eslint-parser',
            ts: '@typescript-eslint/parser',
            vue: '@typescript-eslint/parser',
            ['