React+Vite從零搭建項目及配置的實現(xiàn)
更新時間：2025年04月11日 10:29:08 作者：一朵好運蓮
本文主要介紹了React+Vite從零搭建項目及配置的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
相信很多React初學(xué)者第一次搭建自己的項目，搭建時會無從下手，本篇適合快速實現(xiàn)功能，熟悉React項目搭建流程。
一、創(chuàng)建項目react-item
npm create vite react-item
二、調(diào)整項目目錄結(jié)構(gòu)
-src -apis 項目接口函數(shù) -assets 項目資源文件，比如，圖片等 -components 通用組件 -pages 頁面組件 -store 集中狀態(tài)管理 -utils 工具，比如，token、axios 的封裝等 -App.js 根組件 -index.css 全局樣式 -index.js 項目入口
三、使用scss預(yù)處理器
SASS是一種預(yù)編譯的 CSS，支持一些比較高級的語法，可以提高編寫樣式的效率，CRA接入scss非常簡單只需要我們裝一個sass工具
1. 安裝解析 sass 的包
npm i sass -D
2. 創(chuàng)建全局樣式文件：index.scss
四、組件庫Ant Design
Ant Design（簡稱 Antd）是一個企業(yè)級的 UI 設(shè)計語言和 React 組件庫，由 Ant Financial（螞蟻金服）團隊開發(fā)和維護。它旨在為開發(fā)者提供一套設(shè)計精美、功能完善的前端組件
官方網(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. 準備 Home和 About倆個基礎(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：用于包裹整個應(yīng)用程序，開啟前端路由的功能。在這里使用了別名Router，目的是讓路由能夠通過 URL 來導(dǎo)航頁面而不刷新整個頁面。Route：定義路由規(guī)則，指定 URL 路徑和對應(yīng)的組件。Routes：包裹所有的Route，用于配置和管理路由規(guī)則。Link：用于創(chuàng)建應(yīng)用程序內(nèi)的導(dǎo)航鏈接，通過點擊鏈接來進行頁面導(dǎo)航。Router是 React Router 的核心組件，負責(zé)包裹整個應(yīng)用程序，管理頁面的路由邏輯。<Outlet />：用來渲染嵌套路由的內(nèi)容。在Home組件中，當(dāng)訪問/home/section1或/home/section2時，這部分內(nèi)容會被渲染到<Outlet />所在的位置。
六、配置別名路徑
1. 安裝craco工具包
Create React App 是一個非常流行的工具，用于快速構(gòu)建 React 應(yīng)用。它提供了一些開箱即用的配置，如 Webpack、Babel、ESLint、Prettier 等。然而，這些配置默認是隱藏的，用戶無法直接修改它們。如果你需要自定義 Webpack 或其他工具的配置，就需要執(zhí)行 eject 操作。
問題：eject 的缺點
- 執(zhí)行
eject后，所有的配置文件都會暴露出來并且變得可以修改，但這也意味著你需要管理和維護這些文件，增加了復(fù)雜度。 - 一旦
eject，就無法恢復(fù)，也無法享受 Create React App 后續(xù)版本的自動更新和修復(fù)。
解決方案：CRACO
CRACO 提供了一種無需執(zhí)行 eject 即可自定義配置的方法，它通過修改 CRA 的默認配置來滿足你的需求，同時保持 CRA 的內(nèi)部配置自動管理。
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 作為主要的開發(fā)工具來啟動、構(gòu)建和測試項目，并且通過 eject 保留了傳統(tǒng)的暴露配置的方式，允許開發(fā)者在需要時完全控制項目的配置。
在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àn)的文章就介紹到這了,更多相關(guān)React Vite搭建項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React如何使用localStorage及實現(xiàn)刪除筆記操作過程
這篇文章主要介紹了React如何使用localStorage及實現(xiàn)刪除筆記操作過程,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了react實現(xiàn)Radio組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
在react中我們使用其提供的Hooks中的useState,useEffect,useCallback 時,可能會造成閉包陷阱,下面我們來看一下出現(xiàn)的情況以及如何解決,感興趣的小伙伴跟著小編一起來看看吧2024-07-07
這篇文章主要為大家詳細介紹了react-dnd實現(xiàn)任意拖動與互換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
React文件名和目錄規(guī)范最佳實踐記錄(總結(jié)篇)
React在使用時非常靈活，如果沒有一個規(guī)范約束項目，在開發(fā)過程中會非?；靵y，本文將介紹幾個優(yōu)秀的規(guī)范，介紹文件名和目錄前，需要先簡述一下幾種通用的類型，用來區(qū)分文件的功能，感興趣的朋友一起看看吧2022-05-05
memo可以自己決定是否更新，但它是一個函數(shù)組件而非一個類，本文主要介紹了React.memo引起的bug，具有一定的參考價值，感興趣的可以了解一下2022-03-03
React中useEffect與生命周期鉤子函數(shù)的對應(yīng)關(guān)系說明
這篇文章主要介紹了React中useEffect與生命周期鉤子函數(shù)的對應(yīng)關(guān)系說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解React中錯誤邊界的原理實現(xiàn)與應(yīng)用
在React中,錯誤邊界是一種特殊的組件,用于捕獲其子組件樹中發(fā)生的JavaScript錯誤,并防止這些錯誤冒泡至更高層,導(dǎo)致整個應(yīng)用崩潰,下面我們就來看看它的具體應(yīng)用吧2024-03-03
這篇文章主要介紹了React組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2023-03-03
Node-sass是一個庫,它將Node.js綁定到LibSass（流行樣式表預(yù)處理器Sass的C版本）,它允許用戶以令人難以置信的速度將.scss文件本地編譯為css,并通過連接中間件自動編譯,下面這篇文章主要給大家介紹了關(guān)于React安裝node-sass失敗解決的相關(guān)資料,需要的朋友可以參考下2022-11-11