npm create vite react-item

-src
  -apis           項(xiàng)目接口函數(shù)
  -assets         項(xiàng)目資源文件，比如，圖片等
  -components     通用組件
  -pages          頁(yè)面組件
  -store          集中狀態(tài)管理
  -utils          工具，比如，token、axios 的封裝等
  -App.js         根組件
  -index.css      全局樣式
  -index.js       項(xiàng)目入口

npm i sass -D

npm i antd

import { Button } from 'antd'
import './App.css'

function App() {
  return (
    <>
      <Button type='primary'>按鈕</Button>
    </>
  )
}

export default App

npm i react-router-dom

// src/pages/Home.jsx
import { Outlet, Link } from 'react-router-dom';

const Home = () => {
    return (
        <div>
            <nav>
                <ul>
                    <li><Link to="/home/section1">側(cè)邊欄1</Link></li>
                    <li><Link to="/home/section2">側(cè)邊欄2</Link></li>
                </ul>
            </nav>

            {/* 渲染嵌套路由的內(nèi)容 */}
            <Outlet />
        </div>
    );
}

export default Home;

// src/pages/About.jsx
const About = () => {
    return (
        <div>
            <h2>關(guān)于</h2>

        </div>
    );
}

export default About;

// src/pages/Section1.jsx
const Section1 = () => {
    return (
        <div>
            <h3>Section 1 Content</h3>
            <p>This is the content of Section 1.</p>
        </div>
    );
}

export default Section1;

// src/pages/Section2.jsx
const Section2 = () => {
    return (
        <div>
            <h3>Section 2 Content</h3>
            <p>This is the content of Section 2.</p>
        </div>
    );
}

export default Section2;

// src/App.jsx
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Section1 from './pages/Section1';
import Section2 from './pages/Section2';

const App = () => {
  return (
    <Router>
      <div>
        {/* 主導(dǎo)航欄 */}
        <nav>
          <ul className='tab'>
            <li><Link to="/home">首頁(yè)</Link></li>
            <li><Link to="/about">關(guān)于</Link></li>
          </ul>
        </nav>

        {/* 路由配置 */}
        <Routes>

          <Route path="home" element={<Home />}>
            {/* 二級(jí)路由配置 */}
            <Route path="section1" element={<Section1 />} />
            <Route path="section2" element={<Section2 />} />
          </Route>
          <Route path="about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

npm i @craco/craco -D

const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置別名
    alias: {
      // 約定：使用 @ 表示 src 文件所在路徑
      '@': path.resolve(__dirname, 'src')
    }
  }
}

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'