从零开始起项目 0.0.

从零开始启动一个项目

npm create vite@latest my-vue3-app 新建项目
给项目配置alias

进入vite.config.js配置

php 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve, dirname } from 'path'
import { fileURLToPath } from 'url'

// 当前文件夹路径
const __dirname = dirname(fileURLToPath(import.meta.url))

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src'),
      },
    ],
    // extensions: ['.vue', '.ts', '.js', '.jsx', '.tsx', '.json'],
  },
})

ps：讲解每一个都是干啥的

在vite中配置过之后，已经可以使用@了，但是ts会报错，说找不到模块。现在开始配置ts

json 复制代码

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }, //配置这个让ts识别 @

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

ps：讲讲为啥vite配置过，ts还是会报错

vite和ts的配置文件修改之后不生效。可以重启vscode，再试试。

tsconfig.json 的核心作用就是告诉 TypeScript编译器（tsc）如何去编译你的项目

1、include数组指定了需要被编译的文件

2、exclude数组，指定了需要被排除的文件

3、files数组，精确列出了需要被编译的单个文件名

compilerOptions是配置文件的核心

给项目配置eslint和prettier

npm install -D eslint prettier \ @typescript-eslint/eslint-plugin @typescript-eslint/parser \ eslint-plugin-vue \ eslint-config-prettier eslint-plugin-prettier

eslint
👉 代码风格和语法检查工具，可以发现潜在错误（比如未使用变量）和规范问题（比如缩进不一致）。
prettier
👉 代码格式化工具，负责统一代码排版（比如缩进、引号、分号）。
⚠️ 注意：ESLint 也能做格式化，但社区推荐 让 ESLint 负责规则检查，Prettier 负责格式化。

@typescript-eslint/parser
👉 让 ESLint 能够理解 TypeScript 语法（因为 ESLint 原生只支持 JS）。
@typescript-eslint/eslint-plugin
👉 提供一堆 TypeScript 专用的 ESLint 规则 （比如检查类型声明、避免 any 滥用）。

eslint-plugin-vue
👉 专门给 Vue 单文件组件（.vue 文件）写的 ESLint 规则。
例如：模板中组件命名规范、props 必须校验、避免不必要的 v-if/v-for 嵌套。

eslint-config-prettier
👉 关闭 ESLint 中和 Prettier 冲突的规则，让 Prettier 接管格式化。
（例如 ESLint 可能规定强制加分号，而 Prettier 可能不加，这里用它解决冲突）。
eslint-plugin-prettier
👉 让 Prettier 的格式化结果也能通过 ESLint 报错提示出来。
（比如你写了双引号但 Prettier 规定单引号，ESLint 会直接报错提醒）。

配置eslint和prettierrc

java 复制代码

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser', // 让 ESLint 解析 TS
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended' // 结合 Prettier
  ],
  rules: {
    // 这里可以按需修改规则
    'vue/multi-word-component-names': 'off', // 允许单字组件名
    '@typescript-eslint/no-explicit-any': 'off', // 允许使用 any
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto'
      }
    ]
  }
}

json 复制代码

{
  "semi": false, 
  "singleQuote": true, 
  "printWidth": 100, 
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

在vscode/setting.json 中配置

css 复制代码

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],

  "prettier.configPath": ".prettierrc.json"
}

tsconfig.json的核心配置 compilerOptions

一、项目基础 (Project Basics)

这部分选项定义了项目的基本环境和结构。

选项	作用	常用值与解释
`target`	指定编译后输出的 JavaScript 版本。这是为了浏览器兼容性。	`"ES5"`: 兼容性最好，支持古董浏览器。 `"ES2015"` (或 `"ES6"`): 现代浏览器的基线。 `"ESNext"`: 使用最新的 JS 语法，通常由 Babel 或 Vite 等构建工具进行二次转换。
`module`	指定编译后使用的模块系统。	`"CommonJS"`: Node.js 环境的标准。 `"ESNext"` (或 `"ES2015"`, `"ES2020"`): 浏览器原生支持的 ES Modules。现代前端项目首选。
`lib`	指定要包含在编译中的"库"文件。这些是 TS 内置的类型定义。	`["DOM", "ES2021", "DOM.Iterable"]` `"DOM"`: 包含了所有浏览器环境的全局变量和 API (如 `window`, `document`)。 `"ES2021"`: 包含了 ES2021 引入的新 API (如 `String.prototype.replaceAll`)。
`jsx`	控制如何处理 JSX 语法。	`"preserve"`: 保留 JSX 语法，交给下游工具（如 Babel, Vite）处理。Vue/React 项目常用。 `"react"`: 直接将 JSX 编译成 `React.createElement` 调用。 `"react-jsx"`: 使用 React 17+ 的新 JSX 转换。
`allowJs`	是否允许在项目中混合使用 `.js` 和 `.ts` 文件。	`true`: 允许。在从 JS 项目逐步迁移到 TS 时非常有用。 `false`: (默认) 只编译 `.ts` 文件。
`checkJs`	是否对 `.js` 文件也进行类型检查（需要 `allowJs: true`）。	`true`: 会对 JSDoc 注释进行类型检查，帮助发现 JS 代码中的错误。

二、模块解析 (Module Resolution)

这部分选项告诉编译器如何查找你 import 的模块。

选项	作用	常用值与解释
`moduleResolution`	设置模块解析策略。	`"node"`: 模拟 Node.js 的模块解析方式（查找 `node_modules`），这是绝大多数项目的标准配置。 `"bundler"`: (TS 5.0+) 最新的模式，更符合现代打包工具（Vite, Webpack）的行为。
`baseUrl`	设置解析非相对模块名的"根目录"。是配置路径别名的基础。	`"."`: 通常设置为项目根目录。
`paths`	配置路径别名。必须与 `baseUrl` 配合使用。	`{"@/": ["./src/"]}`: 将所有以 `@/` 开头的导入，映射到 `src/` 目录下。
`rootDir`	指定项目的"源码根目录"。	`"src"`: 告诉编译器所有源码都在 `src` 目录下。有助于确保输出目录结构与源码结构一致。
`rootDirs`	`rootDir` 的复数版，允许指定多个虚拟的源码根目录。	不常用，除非项目结构非常特殊。
`types`	指定需要全局包含的类型定义包。	`["vite/client", "node"]`: 默认情况下，TS 会自动包含 `node_modules/@types` 下的所有包。如果设置了这个选项，就只会包含你明确指定的包。
`typeRoots`	指定存放类型定义 (`.d.ts`) 文件的目录。	`["./node_modules/@types", "./src/types"]`: 默认是 `node_modules/@types`，可以添加自定义的类型目录。

三、严格的类型检查 (Strict Type-Checking)

这部分选项是 TypeScript 的灵魂，开启它们能极大地提升代码质量。

选项	作用	解释
`strict`	"总开关"，一次性开启所有严格检查选项。	`true`: 强烈推荐！相当于同时开启了下面的 `noImplicitAny`, `strictNullChecks` 等所有 `strict...` 选项。
`noImplicitAny`	禁止隐式的 `any` 类型。	如果一个变量的类型无法被推断出来，你必须显式地为它注解类型，否则报错。这是避免 `any` 泛滥的第一道防线。
`strictNullChecks`	严格的 `null` 和 `undefined` 检查。	`null` 和 `undefined` 不再能被赋值给任何类型（除非显式声明 `string
`strictFunctionTypes`	严格的函数参数类型检查（协变与逆变）。	确保函数参数的类型赋值是安全的。
`strictBindCallApply`	对 `bind`, `call`, `apply` 方法的参数进行严格的类型检查。
`strictPropertyInitialization`	强制类的实例属性必须在构造函数中或声明时被初始化。	避免在访问类的属性时，它还是 `undefined`。
`noImplicitThis`	禁止 `this` 表达式带有隐式的 `any` 类型。
`alwaysStrict`	始终在生成的 JavaScript 文件中注入 `"use strict;"`。	开启 JS 的严格模式。

四、代码质量检查 (Additional Checks)

这些选项进一步帮助你编写更干净、更健壮的代码。

选项	作用	解释
`noUnusedLocals`	禁止未使用的局部变量。	`true`: 帮助清理死代码。
`noUnusedParameters`	禁止未使用的函数参数。	`true`: 帮助发现逻辑遗漏或清理不再需要的参数。
`noImplicitReturns`	检查函数是否所有代码路径都有返回值（如果函数声明了返回类型）。	`true`: 避免因为 `if/else` 分支遗漏 `return` 而导致函数返回 `undefined`。
`noFallthroughCasesInSwitch`	禁止 `switch` 语句中的 case "贯穿"。	`true`: 强制每个 `case` 都必须有 `break` 或 `return`，防止意外执行下一个 `case`。

五、输出与打包 (Emit & Bundling)

这部分选项控制最终生成的 JavaScript 文件的内容和位置。

选项	作用	常用值与解释
`outDir`	指定编译后输出的文件夹。	`"./dist"`: 所有编译后的 `.js` 文件都会被放在这个目录下。
`sourceMap`	是否生成 `.map` 文件。	`true`: 生成 Source Map，允许你在浏览器中直接调试 TypeScript 源码。开发必备。
`declaration`	是否为每个 `.ts` 文件生成一个对应的 `.d.ts` 类型声明文件。	`true`: 在编写库或组件库时非常重要，这样其他项目使用你的库时才能获得类型提示。
`declarationMap`	是否为 `.d.ts` 文件也生成 Source Map。	`true`: 方便在 IDE 中"跳转到定义"时，能直接跳到 `.ts` 源码而不是 `.d.ts` 文件。
`removeComments`	是否在输出的 JS 文件中移除所有注释。	`true`: 减小生产环境代码体积。
`noEmit`	不生成任何输出文件。	`true`: 只进行类型检查，不产出 `.js` 文件。通常在配合 Babel 或 Vite 等转换工具时使用，让 TS 只负责"检查"，Babel 负责"编译"。
`isolatedModules`	确保每个文件都可以被安全地独立编译。	`true`: 现代打包工具（如 Vite, esbuild）都是单文件转换，开启此项能确保你的代码与这些工具兼容。

总结与最佳实践

从预设开始 ：不要从零开始写 tsconfig.json。使用框架提供的预设（如 @vue/tsconfig）或社区的最佳实践（如 tsconfig/bases）作为起点。
开启 strict: true：这是拥抱 TypeScript 的第一步，也是最重要的一步。虽然一开始可能会带来一些"痛苦"，但长远来看收益巨大。
target 和 module 的选择 ：在现代前端项目中，通常将 target 和 module 设置为 "ESNext"，然后依赖 Vite, Webpack + Babel 等构建工具来处理最终的浏览器兼容性和模块打包。
配置路径别名 ：baseUrl 和 paths 是提升开发体验的利器，务必配置。
noEmit: true：当 TypeScript 只作为类型检查器，而代码转换由其他工具（Babel, esbuild, SWC）完成时，开启此项可以避免不必要的编译产物。