创建 vite 项目

npm create vite@latest

配置 @ 路径提示

一般项目内引入各种组件于资源都是基于 src 目录，@ 路径符即代表 src/ 目录，使用起来更加方便

1. 安装 node 类型声明

npm i -D @types/node

2. 配置 vite.config.ts

// 1. 导入 join 函数
import { join } from 'path';

// 2. 添加 resolve alias 配置
export default defineConfig({
  plugins: [react()],
  **resolve: {
    alias: {
      '@': join(__dirname, '/src/')
    }
  }**
})

3. 配置 tsconfig.json

在 compilerOptions 下添加配置

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
		......
  },

4. 为函数组件指定类型 （可选）

当使用箭头函数构建函数式组件时，需要为 App 指定类型 React.FC

React.FC 可以接收一个泛型，用于声明 props 的类型 React.FC<T>。如不接收 props，可忽略

import React from "react";

const App: **React.FC** = () => {
  return (
    <div>App</div>
  );
};

export default App;