React-18搭建后台管理 Vite+TS+AntdesignUI -01

以下是一个使用React 18、Vite、TypeScript和Ant Design创建的简单的React项目的基础代码结构：

1. 初始化项目：

npx create-react-app --template typescript my-app
cd my-app
npm install

2. 升级到React 18：

npm install react@latest react-dom@latest

3. 添加Vite：

npm init vite@latest my-app --template react-ts

4. 安装Ant Design：

npm install antd

5. 在src/App.tsx中引入Ant Design和Ant Design的图标库：

import React from 'react';
import { Button } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';
 
const App: React.FC = () => (
  <div>
    <Button icon={<AppstoreOutlined />}>Hello, world!</Button>
  </div>
);
 
export default App;

6. 在vite.config.ts中配置Ant Design的按需加载：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), legacy()],
  optimizeDeps: {
    include: ['antd'],
  },
});

7. 在tsconfig.json中配置对.mjs的支持：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "jsx": "preserve",
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "*": ["./*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx", "src/**/*.json"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这样，你就有了一个使用React 18、Vite、TypeScript和Ant Design的基础后台管理项目模板。你可以在此基础上添加更多的功能和组件。