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

一、创建项目react-item

1. npm create vite react-item

复制代码

二、调整项目目录结构

1. -src
   
2.   -apis           项目接口函数
   
3.   -assets         项目资源文件，比如，图片等
   
4.   -components     通用组件
   
5.   -pages          页面组件
   
6.   -store          集中状态管理
   
7.   -utils          工具，比如，token、axios 的封装等
   
8.   -App.js         根组件
   
9.   -index.css      全局样式
   
10.   -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 组件测试

1. import { Button } from 'antd'
   
2. import './App.css'
   
3. 
   
4. function App() {
   
5.   return (
   
6.     <>
   
7.       <Button type='primary'>按钮</Button>
   
8.     </>
   
9.   )
   
10. }
    
11. 
    
12. export default App

复制代码

成功：

五、配置基础路由


1. 安装路由包

1. npm i react-router-dom

复制代码

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

一级路由：

1. // src/pages/Home.jsx
   
2. import { Outlet, Link } from 'react-router-dom';
   
3. 
   
4. const Home = () => {
   
5.     return (
   
6.         <div>
   
7.             <nav>
   
8.                 <ul>
   
9.                     <li><Link to="/home/section1">侧边栏1</Link></li>
   
10.                     <li><Link to="/home/section2">侧边栏2</Link></li>
    
11.                 </ul>
    
12.             </nav>
    
13. 
    
14.             {/* 渲染嵌套路由的内容 */}
    
15.             <Outlet />
    
16.         </div>
    
17.     );
    
18. }
    
19. 
    
20. export default Home;

复制代码

1. // src/pages/About.jsx
   
2. const About = () => {
   
3.     return (
   
4.         <div>
   
5.             <h2>关于</h2>
   
6. 
   
7.         </div>
   
8.     );
   
9. }
   
10. 
    
11. export default About;

复制代码

二级路由 Section1和Section2

1. // src/pages/Section1.jsx
   
2. const Section1 = () => {
   
3.     return (
   
4.         <div>
   
5.             <h3>Section 1 Content</h3>
   
6.             <p>This is the content of Section 1.</p>
   
7.         </div>
   
8.     );
   
9. }
   
10. 
    
11. export default Section1;

复制代码

1. // src/pages/Section2.jsx
   
2. const Section2 = () => {
   
3.     return (
   
4.         <div>
   
5.             <h3>Section 2 Content</h3>
   
6.             <p>This is the content of Section 2.</p>
   
7.         </div>
   
8.     );
   
9. }
   
10. 
    
11. export default Section2;

复制代码

3. 配置路由

App.jsx

1. // src/App.jsx
   
2. import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
   
3. import Home from './pages/Home';
   
4. import About from './pages/About';
   
5. import Section1 from './pages/Section1';
   
6. import Section2 from './pages/Section2';
   
7. 
   
8. const App = () => {
   
9.   return (
   
10.     <Router>
    
11.       <div>
    
12.         {/* 主导航栏 */}
    
13.         <nav>
    
14.           <ul className='tab'>
    
15.             <li><Link to="/home">首页</Link></li>
    
16.             <li><Link to="/about">关于</Link></li>
    
17.           </ul>
    
18.         </nav>
    
19. 
    
20.         {/* 路由配置 */}
    
21.         <Routes>
    
22. 
    
23.           <Route path="home" element={<Home />}>
    
24.             {/* 二级路由配置 */}
    
25.             <Route path="section1" element={<Section1 />} />
    
26.             <Route path="section2" element={<Section2 />} />
    
27.           </Route>
    
28.           <Route path="about" element={<About />} />
    
29.         </Routes>
    
30.       </div>
    
31.     </Router>
    
32.   );
    
33. }
    
34. 
    
35. export default App;

复制代码

• 1. BrowserRouter

  复制代码
  ：用于包裹整个应用程序，开启前端路由的功能。在这里使用了别名
  1. Router

  复制代码
  ，目的是让路由能够通过 URL 来导航页面而不刷新整个页面。
  
• 1. Route

  复制代码
  ：定义路由规则，指定 URL 路径和对应的组件。
  
• 1. Routes

  复制代码
  ：包裹所有的
  1. Route

  复制代码
  ，用于配置和管理路由规则。
  
• 1. Link

  复制代码
  ：用于创建应用程序内的导航链接，通过点击链接来进行页面导航。
  
• 1. Router

  复制代码
  是 React Router 的核心组件，负责包裹整个应用程序，管理页面的路由逻辑。
  
• 1. <Outlet />

  复制代码
  ：用来渲染嵌套路由的内容。在
  1. Home

  复制代码
  组件中，当访问
  1. /home/section1

  复制代码
  或
  1. /home/section2

  复制代码
  时，这部分内容会被渲染到
  1. <Outlet />

  复制代码
  所在的位置。
  

六、配置别名路径


1. 安装craco工具包

1. Create React App

复制代码

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

1. eject

复制代码

操作。
问题：eject 的缺点

• 执行
  1. eject

  复制代码
  后，所有的配置文件都会暴露出来并且变得可以修改，但这也意味着你需要管理和维护这些文件，增加了复杂度。
  
• 一旦
  1. eject

  复制代码
  ，就无法恢复，也无法享受 Create React App 后续版本的自动更新和修复。
  

解决方案：CRACO

1. CRACO

复制代码

提供了一种无需执行

1. eject

复制代码

即可自定义配置的方法，它通过修改 CRA 的默认配置来满足你的需求，同时保持 CRA 的内部配置自动管理。

1. npm i @craco/craco -D

复制代码

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

1. const path = require('path')
   
2. 
   
3. module.exports = {
   
4.   // webpack 配置
   
5.   webpack: {
   
6.     // 配置别名
   
7.     alias: {
   
8.       // 约定：使用 @ 表示 src 文件所在路径
   
9.       '@': path.resolve(__dirname, 'src')
   
10.     }
    
11.   }
    
12. }

复制代码

3. 修改 `scripts 命令`

这个配置保留了

1. craco

复制代码

作为主要的开发工具来启动、构建和测试项目，并且通过

1. eject

复制代码

保留了传统的暴露配置的方式，允许开发者在需要时完全控制项目的配置。
在package.json中：

1. "scripts": {
   
2.   "start": "craco start",
   
3.   "build": "craco build",
   
4.   "test": "craco test",
   
5.   "eject": "react-scripts eject"
   
6. }

复制代码

4. 测试是否生效

1. import Login from '@/pages/Login'
   
2. import Layout from '@/pages/Layout'

复制代码

到此这篇关于React+Vite从零搭建项目及配置的实现的文章就介绍到这了,更多相关React Vite搭建项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339445pzo.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！