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

最新推荐文章于 2024-06-25 15:39:15 发布

zhanle_huang

最新推荐文章于 2024-06-25 15:39:15 发布

阅读量1.5k

点赞数

分类专栏：前端 TypeScript vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ta_huang/article/details/131783009

版权

前端同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

TypeScript

2 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

该文介绍了如何在Vue2项目中，基于脚手架5.0版本，配置使用TS语法。首先，需要安装typescript-eslint及相关依赖，然后创建tsconfig.json文件来设定编译选项。接着，在vue.config.js中配置webpack以支持.ts和.vue文件的解析。最后，更新eslintrc.js以使eslint支持TS，并使用vue-eslint-parser解析模板。

摘要由CSDN通过智能技术生成

需求

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

配置过程

安装依赖：

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

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

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

在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();
    },

配置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',
            ['<template>']: "@typescript-eslint/parser",
        }
        // plugins: ['@typescript-eslint']
        // ecmaFeatures:{
        //     jsx:true
        // }
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        semi: [2, 'always']
    }
};