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 (<><Button type='primary'>按钮</Button></>)
}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 (<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 的内部配置自动管理。

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'