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

时间：2025-07-21 10:05:54|栏目：JavaScript|点击：次

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

一、创建项目react-item

1	`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 的包

1	`npm i sass -D`

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

四、组件库Ant Design

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

官方网站：

Ant Design of React - Ant Design

1. 安装 antd 组件库

1	`npm i antd`

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

import { Button } from 'antd'
import './App.css'
 
function App() {
  return (
    &lt;&gt;
      &lt;Button type='primary'&gt;按钮&lt;/Button&gt;
    &lt;/&gt;
  )
}
 
export default App

成功：

五、配置基础路由

1. 安装路由包

1	`npm i react-router-dom`

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

一级路由：

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

二级路由 Section1和Section2

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

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

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

六、配置别名路径

1. 安装craco工具包

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

问题：eject 的缺点

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

解决方案：CRACO

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

1	`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'

上一篇：vue实现.md文件预览功能的两种方法详解

栏目：JavaScript

下一篇：VS Code中搭建JavaScript运行环境超详细过程

本文标题：React+Vite从零搭建项目及配置的实现

本文地址：https://www.fushidao.cc/wangluobiancheng/23707.html

更多JavaScript

JavaScript