antd模板工程

pnpm create vite@latest my-project -- --template react
cd my-project
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  corePlugins: {
    preflight: false,
  },
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,css,scss}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/main.css:

@layer tailwind-base, antd;

@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

pnpm i antd react-router-dom

src/main.tsx:

import { App, ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import {
	createBrowserRouter,
	Link,
	Outlet,
	RouterProvider,
} from "react-router-dom";
import "./main.css";

function HomeElement() {
	return <div>Home</div>;
}

function AboutElement() {
	return <div>About</div>;
}

function SettingsElement() {
	return <div>Settings</div>;
}

function ErrorElement() {
	return (
		<div className="flex justify-center">
			<div className="text-center">
				<h1>404</h1>
				<p>资源未找到</p>
			</div>
		</div>
	);
}

function Layout() {
	return (
		<>
			<nav>
				<div className="flex items-center justify-between">
					<div>
						<Link to="/">Brand</Link>
					</div>
					<div>
						<Link to="/">Home</Link>
						<Link to="/about" className="px-2">About</Link>
					</div>
					<div>
						<Link to="/settings">Settings</Link>
					</div>
				</div>
			</nav>
			<Outlet />
		</>
	);
}

const router = createBrowserRouter([
	{
		path: "/",
		element: <Layout />,
		errorElement: <ErrorElement />,
		children: [
			{
				path: "",
				element: <HomeElement />,
			},
			{
				path: "about",
				element: <AboutElement />,
			},
			{
				path: "settings",
				element: <SettingsElement />,
			},
		],
	},
]);

if (import.meta.hot) {
	import.meta.hot.dispose(() => router.dispose());
}

createRoot(document.getElementById("root") ?? document.body).render(
	<StrictMode>
		<ConfigProvider locale={zhCN}>
			<App />
			<RouterProvider router={router} />
		</ConfigProvider>
	</StrictMode>,
);