事前准备
项目初始化
依赖清单
开发依赖清单
tsconfig.json 追加配置
vite.config.ts
.prettierrc.js（可选）
vscode settings.json推荐配置（可选）
项目结构

事前准备

node
npm
vscode / webstorm

项目初始化

npm create vite
√ Project name: » general-admin-system-ui
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

cd general-admin-system-ui
npm install
code .

依赖清单

{
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@ant-design/pro-components": "^2.4.4",
    "antd": "^5.4.5",
    "axios": "^1.3.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0"
  },
}

开发依赖清单

{
  "devDependencies": {
    "@types/node": "^18.16.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.0"
  }
}

tsconfig.json 追加配置

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

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  // 与tsconfig.json的paths关联
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '@@': __dirname,
    },
  },
  server: {
    port: 9999,
  },
  plugins: [react()],
})

.prettierrc.js（可选）

module.exports = {
  singleQuote: true,
  semi: false,
}

vscode settings.json推荐配置（可选）

{
  "[javascript]": {
    "editor.maxTokenizationLineLength": 2500,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
    "gitlens.codeLens.scopes": ["document"],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
    "gitlens.codeLens.scopes": ["document"],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

项目结构

general-admin-system-ui
|-- index.html
|-- package-lock.json
|-- package.json
|-- public
|   `-- vite.svg
|-- src
|   |-- App.tsx
|   |-- assets
|   |   `-- react.svg
|   |-- main.tsx
|   `-- vite-env.d.ts
|-- tree.md
|-- tree.txt
|-- tsconfig.json
|-- tsconfig.node.json
`-- vite.config.ts