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'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/65014.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity复刻胡闹厨房复盘 模块一 新输入系统订阅链与重绑定

本文仅作学习交流&#xff0c;不做任何商业用途 郑重感谢siki老师的汉化教程与代码猴的免费教程以及搬运烤肉的小伙伴 版本&#xff1a;Unity6 模板&#xff1a;3D 核心 渲染管线&#xff1a;URP ------------------------------…

从零开始的编程-java篇1.6.1 万变不离其宗,hello word

前言&#xff1a; 通过实践而发现真理&#xff0c;又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识&#xff0c;又从理性认识而能动地指导革命实践&#xff0c;改造主观世界和客观世界。实践、认识、再实践、再认识&#xff0c;这种形式&#xff0c;循环往…

【漏洞复现】CVE-2021-45788 SQL Injection

漏洞信息 NVD - cve-2021-45788 Time-based SQL Injection vulnerabilities were found in Metersphere v1.15.4 via the “orders” parameter. Authenticated users can control the parameters in the “order by” statement, which causing SQL injection. API: /test…

Mac系统下 idea运行maven项目中存在的问题BeanDefinitionStoreException

1.在进行 注解XML 方式整合三层架构事出现此问题 org.springframework.beans.factory.BeanDefinitionStoreException: Failed to read candidate component class: file [/Volumes/PS2000/Java/SpringProject/micro-shop/spring-annotation-practice-03/target/classes/com/ja…

shiro注入filter内存马(绕过长度限制)

shiro环境 https://github.com/yyhuni/shiroMemshell&#xff08;实验环境&#xff09; 这里用的 Client_memshell.java package com.example.demo;import javassist.ClassPool; import javassist.CtClass; import org.apache.shiro.crypto.AesCipherService; import org.ap…

c语言大一期末复习

l例1&#xff1a;输入一行字符&#xff0c;统计其中空格的个数 #include<stdio.h> int main( ) { char ch; int count0; while((chgetchar())!\n) { if(ch ) { count1; } } printf("%d\n",coun…

心血管疾病中医怎么调理

心血管疾病在中医范畴内属于胸痹&#xff0c;中医会根据不同的证候&#xff0c;如心血瘀阻证、寒凝心脉证、痰浊闭阻证、心肾阴虚证、气阴两虚证等&#xff0c;采取不同的调理方法。以下是一些中医调理心血管疾病的常用手段&#xff1a; 一、中药调理 ‌心血瘀阻证‌&#xf…

群晖利用acme.sh自动申请证书并且自动重载证书的问题解决

前言 21年的时候写了一个在群晖&#xff08;黑群晖&#xff09;下利用acme.sh自动申请Let‘s Encrypt的脚本工具 群晖使用acme自动申请Let‘s Encrypt证书脚本&#xff0c;自动申请虽然解决了&#xff0c;但是自动重载一直是一个问题&#xff0c;本人也懒&#xff0c;一想到去…

raid 状态查看 storcli64

场景 当磁盘报错的时候使用该命令排查 fdisk -l /dev/sdb fdisk: cannot open /dev/sdb: Input/output error进一步使用 smartctl 排查 smartctl -a /dev/sdb 输出 smartctl 7.1 2019-12-30 r5022 [x86_64-linux-5.4.0-144-generic] (local build) Copyright (C) 2002-19, B…

《探索PyTorch计算机视觉:原理、应用与实践》

一、PyTorch 与计算机视觉的奇妙相遇 在当今数字化的时代&#xff0c;计算机视觉作为一门能够赋予机器 “看” 的能力的技术&#xff0c;正以前所未有的速度蓬勃发展&#xff0c;深刻地改变着我们的生活和众多行业的运作模式。从智能手机中的人脸识别解锁&#xff0c;到安防监控…

使用VSCode Debugger 调试 React项目

一般我们调试代码时&#xff0c;用的最多的应该就是console.log方式了&#xff0c;还有的是使用Chrome DevTools 通过在对应的 sourcemap代码位置打断点进行调试&#xff0c;除了上面两种方式外还有一种更好用的调试方式&#xff1a; VSCode Debugger。 VSCode Debugger可以直…

mapbox基础,加载mapbox官方地图

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;mapbox 从入门到精通 文章目录 一、&#x1f340;前言1.1 ☘️mapboxgl.Map 地图对象…

汽车IVI中控开发入门及进阶(三十八):手机投屏HiCar开发

手机投屏轻松实现手机与汽车的无缝连接,导航、音乐、通话等功能应有尽有,还支持更多第三方应用,让车载互联生活更加丰富多彩。 HiCar在兼容性和开放性上更具优势。 手机投屏可以说是车机的杀手级应用,大大拓宽了车机的可用性范围。其中华为推出的HiCar就是非常好用的一种。…

Elasticsearch:确保业务规则与语义搜索无缝协作

作者&#xff1a;来自 Elastic Kathleen DeRusso 利用查询规则与语义搜索和重新排序相结合的强大功能。 更多阅读&#xff1a; Elasticsearch 8.10 中引入查询规则 - query rules Elasticsearch 查询规则现已正式发布 - query rules 你是否知道查询规则&#xff08;query ru…

把riscv32位系统弄懂1:riscv32 CPU指令学习

Riscv手册 首先下载手册&#xff1a;文件下载----中国开放指令生态(RISC-V)联盟 从这个页面下载riscv-spec-v2.1中文版 也可以下载中科大的这本&#xff1a;RISC-V手册 Riscv32指令集包括基础指令集和一些扩展指令集&#xff0c;比如在ESP32C3技术手册中&#xff0c;写到E…

全国消费水平系统|Java|SSM|JSP|

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…

达梦数据库-读写分离集群部署

读写分离集群部署 读写分离集群由一个主库以及一个或者多个(最多可以配置 8 个)实时备库组成&#xff0c;基于实时归档实现的高性能数据库集群&#xff0c;不但提供数据保护、容灾等数据守护基本功能&#xff0c;还具有读写操作自动分离、负载均衡等特性。同时可以配置确认监视…

【ALGC】探秘 ALGC—— 卓越数据处理能力的科技瑰宝

我的个人主页 我的领域&#xff1a;人工智能篇&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;&#x1f44d;点赞 收藏❤ 在大数据时代&#xff0c;如何高效地处理和分析海量数据是一个核心挑战。ALGC&#xff08;Advanced Learning and Generalized Comp…

docker仓库用户认证

保证实验环境纯净删除启动的docker 1.安装建立认证文件的工具包 [rootlocalhost ~]# yum install httpd-tools -y 2.创建目录存放认证文件 [rootlocalhost ~]# mkdir auth [rootlocalhost ~]# htpasswd -Bc auth/.htpasswd lee #-B 强制使用最安全加密方式&#xff0c;默认用m…

(OCPP服务器)SteVe编译搭建全过程

注意&#xff1a;建议使用3.6.0&#xff0c;我升级到3.7.1&#xff0c;并没有多什么新功能&#xff0c;反而电表的实时数据只能看到累计电能了&#xff0c;我回退了就正常&#xff0c;数据库是兼容的&#xff0c;java版本换位java11&#xff0c;其他不变就好 背景&#xff1a;…