React+Vite从零搭建项目及配置的实现

npm create vite react-item

-src
  -apis           项目接口函数
  -assets         项目资源文件，比如，图片等
  -components     通用组件
  -pages          页面组件
  -store          集中状态管理
  -utils          工具，比如，token、axios 的封装等
  -App.js         根组件
  -index.css      全局样式
  -index.js       项目入口

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">侧边栏1</Link></li>
                    <li><Link to="/home/section2">侧边栏2</Link></li>
                </ul>
            </nav>

            {/* 渲染嵌套路由的内容 */}
            <Outlet />
        </div>
    );
}

export default Home;

// src/pages/About.jsx
const About = () => {
    return (
        <div>
            <h2>关于</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>
        {/* 主导航栏 */}
        <nav>
          <ul className='tab'>
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/about">关于</Link></li>
          </ul>
        </nav>

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

          <Route path="home" element={<Home />}>
            {/* 二级路由配置 */}
            <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'