antd模板工程

卓能文發表於2024-08-14
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}",
  ],
  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, RouterProvider } from "react-router-dom";
import "./main.css";

const router = createBrowserRouter([
	{
		path: "/",
		element: <div>Hello world!</div>,
		errorElement: (
			<div className="flex justify-center">
				<div className="text-center">
					<h1>404</h1>
					<p>資源未找到</p>
				</div>
			</div>
		),
	},
]);

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

相關文章