React+Vite从零搭建项目及配置详解

相信很多React初学者第一次搭建自己的项目，搭建时会无从下手，本篇适合快速实现功能，熟悉React项目搭建流程。

目录

一、创建项目react-item

二、调整项目目录结构

三、使用scss预处理器

四、组件库Ant Design

五、配置基础路由

六、配置别名路径

---

一、创建项目react-item

npm create vite react-item

二、调整项目目录结构

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

三、使用scss预处理器

SASS是一种预编译的 CSS，支持一些比较高级的语法，可以提高编写样式的效率，CRA接入scss非常简单只需要我们装一个sass工具

1. 安装解析 sass 的包

npm i sass -D

2. 创建全局样式文件：index.scss

四、组件库Ant Design

Ant Design（简称 Antd）是一个企业级的 UI 设计语言和 React 组件库，由 Ant Financial（蚂蚁金服）团队开发和维护。它旨在为开发者提供一套设计精美、功能完善的前端组件

官方网站：

Ant Design of React - Ant Design

1. 安装 antd 组件库

npm i antd

2. 在App.jsx中导入 Button 组件测试

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

function App() {
  return (
    <>
      按钮
    
  )
}

export default App

 成功：

五、配置基础路由

1. 安装路由包 

npm i react-router-dom

2. 准备 Home和 About俩个基础组件

一级路由：

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

const Home = () => {
    return (
        

            

                

                    
侧边栏1
                    
侧边栏2
                
            

            {/* 渲染嵌套路由的内容 */}
            
        
    );
}

export default Home;

// src/pages/About.jsx
const About = () => {
    return (
        

            
关于

        
    );
}

export default About;

二级路由 Section1和Section2

// src/pages/Section1.jsx
const Section1 = () => {
    return (
        

            
Section 1 Content
            
This is the content of Section 1.
        
    );
}

export default Section1;

// src/pages/Section2.jsx
const Section2 = () => {
    return (
        

            
Section 2 Content
            
This is the content of Section 2.
        
    );
}

export default Section2;

3. 配置路由

App.jsx

// 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 (
    
      

        {/* 主导航栏 */}
        

          

            
首页
            
关于
          
        

        {/* 路由配置 */}
        

          }>
            {/* 二级路由配置 */}
            } />
            } />
          
          } />
        
      
    
  );
}

export default App;

• BrowserRouter：用于包裹整个应用程序，开启前端路由的功能。在这里使用了别名 Router，目的是让路由能够通过 URL 来导航页面而不刷新整个页面。
• Route：定义路由规则，指定 URL 路径和对应的组件。
• Routes：包裹所有的 Route，用于配置和管理路由规则。
• Link：用于创建应用程序内的导航链接，通过点击链接来进行页面导航。
• Router 是 React Router 的核心组件，负责包裹整个应用程序，管理页面的路由逻辑。
• ：用来渲染嵌套路由的内容。在 Home 组件中，当访问 /home/section1 或 /home/section2 时，这部分内容会被渲染到  所在的位置。

六、配置别名路径

1. 安装craco工具包

Create React App 是一个非常流行的工具，用于快速构建 React 应用。它提供了一些开箱即用的配置，如 Webpack、Babel、ESLint、Prettier 等。然而，这些配置默认是隐藏的，用户无法直接修改它们。如果你需要自定义 Webpack 或其他工具的配置，就需要执行 eject 操作。

问题：eject 的缺点

• 执行 eject 后，所有的配置文件都会暴露出来并且变得可以修改，但这也意味着你需要管理和维护这些文件，增加了复杂度。
• 一旦 eject，就无法恢复，也无法享受 Create React App 后续版本的自动更新和修复。

解决方案：CRACO

CRACO 提供了一种无需执行 eject 即可自定义配置的方法，它通过修改 CRA 的默认配置来满足你的需求，同时保持 CRA 的内部配置自动管理。

npm i @craco/craco -D

2. 根目录增加 `craco.config.js` 配置文件

const path = require('path')

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

3. 修改 `scripts 命令`

这个配置保留了 craco 作为主要的开发工具来启动、构建和测试项目，并且通过 eject 保留了传统的暴露配置的方式，允许开发者在需要时完全控制项目的配置。

在package.json中：

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

4. 测试是否生效

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