React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn)
相信很多React初學(xué)者第一次搭建自己的項(xiàng)目，搭建時(shí)會(huì)無從下手，本篇適合快速實(shí)現(xiàn)功能，熟悉React項(xiàng)目搭建流程。
一、創(chuàng)建項(xiàng)目react-item
npm create vite react-item
二、調(diào)整項(xiàng)目目錄結(jié)構(gòu)
-src -apis 項(xiàng)目接口函數(shù) -assets 項(xiàng)目資源文件，比如，圖片等 -components 通用組件 -pages 頁面組件 -store 集中狀態(tài)管理 -utils 工具，比如，token、axios 的封裝等 -App.js 根組件 -index.css 全局樣式 -index.js 項(xiàng)目入口
三、使用scss預(yù)處理器
SASS是一種預(yù)編譯的 CSS，支持一些比較高級的語法，可以提高編寫樣式的效率，CRA接入scss非常簡單只需要我們裝一個(gè)sass工具
1. 安裝解析 sass 的包
npm i sass -D
2. 創(chuàng)建全局樣式文件：index.scss
四、組件庫Ant Design
Ant Design（簡稱 Antd）是一個(gè)企業(yè)級的 UI 設(shè)計(jì)語言和 React 組件庫，由 Ant Financial（螞蟻金服）團(tuán)隊(duì)開發(fā)和維護(hù)。它旨在為開發(fā)者提供一套設(shè)計(jì)精美、功能完善的前端組件
官方網(wǎng)站：
Ant Design of React - Ant Design
1. 安裝 antd 組件庫
npm i antd
2. 在App.jsx中導(dǎo)入 Button 組件測試
import { Button } from 'antd'
import './App.css'
function App() {
return (
<>
<Button type='primary'>按鈕</Button>
</>
)
}
export default App
成功：
五、配置基礎(chǔ)路由
1. 安裝路由包
npm i react-router-dom
2. 準(zhǔn)備 Home和 About倆個(gè)基礎(chǔ)組件
一級路由：
// src/pages/Home.jsx
import { Outlet, Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<nav>
<ul>
<li><Link to="/home/section1">側(cè)邊欄1</Link></li>
<li><Link to="/home/section2">側(cè)邊欄2</Link></li>
</ul>
</nav>
{/* 渲染嵌套路由的內(nèi)容 */}
<Outlet />
</div>
);
}
export default Home;
// src/pages/About.jsx
const About = () => {
return (
<div>
<h2>關(guān)于</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>
{/* 主導(dǎo)航欄 */}
<nav>
<ul className='tab'>
<li><Link to="/home">首頁</Link></li>
<li><Link to="/about">關(guān)于</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：用于包裹整個(gè)應(yīng)用程序，開啟前端路由的功能。在這里使用了別名Router，目的是讓路由能夠通過 URL 來導(dǎo)航頁面而不刷新整個(gè)頁面。Route：定義路由規(guī)則，指定 URL 路徑和對應(yīng)的組件。Routes：包裹所有的Route，用于配置和管理路由規(guī)則。Link：用于創(chuàng)建應(yīng)用程序內(nèi)的導(dǎo)航鏈接，通過點(diǎn)擊鏈接來進(jìn)行頁面導(dǎo)航。Router是 React Router 的核心組件，負(fù)責(zé)包裹整個(gè)應(yīng)用程序，管理頁面的路由邏輯。<Outlet />：用來渲染嵌套路由的內(nèi)容。在Home組件中，當(dāng)訪問/home/section1或/home/section2時(shí)，這部分內(nèi)容會(huì)被渲染到<Outlet />所在的位置。
六、配置別名路徑
1. 安裝craco工具包
Create React App 是一個(gè)非常流行的工具，用于快速構(gòu)建 React 應(yīng)用。它提供了一些開箱即用的配置，如 Webpack、Babel、ESLint、Prettier 等。然而，這些配置默認(rèn)是隱藏的，用戶無法直接修改它們。如果你需要自定義 Webpack 或其他工具的配置，就需要執(zhí)行 eject 操作。
問題：eject 的缺點(diǎn)
- 執(zhí)行
eject后，所有的配置文件都會(huì)暴露出來并且變得可以修改，但這也意味著你需要管理和維護(hù)這些文件，增加了復(fù)雜度。 - 一旦
eject，就無法恢復(fù)，也無法享受 Create React App 后續(xù)版本的自動(dòng)更新和修復(fù)。
解決方案：CRACO
CRACO 提供了一種無需執(zhí)行 eject 即可自定義配置的方法，它通過修改 CRA 的默認(rèn)配置來滿足你的需求，同時(shí)保持 CRA 的內(nèi)部配置自動(dòng)管理。
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 命令`
這個(gè)配置保留了 craco 作為主要的開發(fā)工具來啟動(dòng)、構(gòu)建和測試項(xiàng)目，并且通過 eject 保留了傳統(tǒng)的暴露配置的方式，允許開發(fā)者在需要時(shí)完全控制項(xiàng)目的配置。
在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'
到此這篇關(guān)于React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React Vite搭建項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
再次談?wù)揜eact.js實(shí)現(xiàn)原生js拖拽效果引起的一系列問題
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦κ袌錾纤?JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站.本文給大家介紹React.js實(shí)現(xiàn)原生js拖拽效果，需要的朋友一起學(xué)習(xí)吧2016-04-04
使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
這篇文章主要介紹了使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
hooks寫React組件的5個(gè)注意細(xì)節(jié)詳解
這篇文章主要為大家介紹了hooks寫React組件的5個(gè)需要注意的細(xì)節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React Hook 父子組件相互調(diào)用函數(shù)方式
這篇文章主要介紹了React Hook 父子組件相互調(diào)用函數(shù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本文將從基礎(chǔ)到深入,拆解為什么在 React 組件中大量使用原生屬性（尤其是 data-*）是一種更專業(yè)、更可維護(hù)、更高性能的工程實(shí)踐,感興趣的朋友跟隨小編一起看看吧2025-11-11
React實(shí)現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解
這篇文章主要介紹了React如何有效減少使用useContext導(dǎo)致的不必要渲染,使用useContext在改變一個(gè)數(shù)據(jù)時(shí)，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
本文主要介紹了React翻頁器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在現(xiàn)代單頁應(yīng)用（SPA）中,路由管理是至關(guān)重要的一部分,它不僅決定了用戶如何在頁面間切換,還直接影響到整個(gè)應(yīng)用的性能和用戶體驗(yàn),這些看似不起眼的問題,往往會(huì)導(dǎo)致功能錯(cuò)亂和性能下降,本篇文章將深入探討在 React 中如何高效監(jiān)聽路由變化,需要的朋友可以參考下2025-01-01
本篇文章主要介紹了淺談react前后端同構(gòu)渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了React Fragments使用方法，關(guān)于react Fragments,React中一個(gè)常見模式是為一個(gè)組件返回多個(gè)元素。Fragments 可以讓你聚合一個(gè)子元素列表，并且不在DOM中增加額外節(jié)點(diǎn)2022-12-12