一、使用 Vite 创建项目

# 使用 npm
npm create vite@latest my-vue-project -- --template vue-ts

在执行过程中，系统会提示你输入项目名称并选择模板。分别请选择 Vue、TypeScript。

项目创建成功后，进入项目目录并安装依赖：
cd my-vue-project
npm install

二、配置 TypeScript

Vite 的 vue-ts 模板已经生成了基础的 tsconfig.json 文件。为了获得更严格的类型检查和更好的开发体验，建议进行如下优化配置 ：

在你的项目根目录下，打开或创建 tsconfig.json 文件，并确保其内容大致如下：
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

关键配置说明：
strict: true：开启所有严格的类型检查选项，这是使用 TypeScript 的核心优势。
baseUrl 和 paths：配置模块别名（如 @/components），让导入路径更简洁。你需要在 vite.config.ts 中同步配置别名。
include：指定需要编译的文件范围，确保 .vue 文件被包含在内。

三、安装与配置 ESLint

为了保证代码质量和团队风格统一，我们需要配置 ESLint。由于 ESLint 已进入“扁平化配置”时代（eslint.config.js），我们将采用最新的配置方式
1. 安装必要的依赖
npm install -D eslint \
  @eslint/js \
  typescript-eslint \
  eslint-plugin-vue \
  @vue/eslint-config-typescript \
  globals

2. 创建 ESLint 配置文件
在项目根目录下创建 eslint.config.js 文件：
// eslint.config.js
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import vueTsEslintConfig from '@vue/eslint-config-typescript'
import globals from 'globals'

export default tseslint.config(
  // 全局忽略
  {
    ignores: ['**/dist/**', '**/node_modules/**', '**/public/**', '**/coverage/**'],
  },
  // 1. JavaScript 推荐规则
  js.configs.recommended,
  // 2. 配置 TypeScript 文件解析与规则
  ...tseslint.configs.recommended,
  // 3. 配置 Vue 文件解析与规则 (使用 Vue 官方的 flat 配置)
  ...pluginVue.configs['flat/recommended'],
  // 4. Vue + TypeScript 专用配置 (来自 @vue/eslint-config-typescript)
  ...vueTsEslintConfig(),
  // 5. 自定义规则和文件匹配
  {
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parserOptions: {
        // 配置 Vue 解析器，让 TypeScript 解析 .vue 文件中的 <script> 块
        parser: tseslint.parser,
        extraFileExtensions: ['.vue'],
        sourceType: 'module',
      },
    },
    rules: {
      // 在这里添加或覆盖规则
      'vue/multi-word-component-names': 'off', // 允许单文件组件名
      '@typescript-eslint/no-explicit-any': 'warn', // 使用 any 类型时给出警告
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], // 未使用变量报错，但忽略下划线开头的参数
    },
  },
  // 6. 对测试文件的特殊配置 (可选)
  {
    files: ['src/**/__tests__/**/*.{js,ts,vue}', 'src/**/*.spec.{js,ts}'],
    rules: {
      // 测试文件可以使用 any 或未定义变量
      '@typescript-eslint/no-explicit-any': 'off',
    },
  }
)
配置解读：
tseslint.configs.recommended：启用 typescript-eslint 的推荐规则，对 TypeScript 代码进行高质量检查 。

pluginVue.configs['flat/recommended']：启用 Vue 3 的推荐规则 。

vueTsEslintConfig()：Vue 官方提供的专门用于 TypeScript 项目的 ESLint 配置，它能正确处理 .vue 文件中的 TypeScript 代码 。

自定义规则：你可以在 rules 对象中根据团队习惯调整规则，例如关闭组件强制多词命名，或放宽对测试文件的检查。

3. 添加 NPM 脚本
在 package.json 的 "scripts" 中添加：
{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix",
    "format": "prettier --write src/"
  }
}