1. 安裝vite并創(chuàng)建一個react項目
使用 NPM:
npm create vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpm create vite
1. 我使用的 yarn安裝，基本配置項目名字, 框架react ，js
2. cd vite-react進入項目目錄安裝node包并啟動項目
yarn add install
加載之后使用啟動命令yarn run dev
2. 安裝引入Ant Design
-
引入依賴（我用的yarn，沒有安裝的也可以使用npm，根據(jù)自己情況選擇）
使用 npm:
yarn add antd
使用 yarn:
npm install antd --save
安裝完成：
-
使用啟動命令：yarn run dev 或者npm run dev
-
清除App.jsx默認內(nèi)容并引入antd
1. 清空App.css和index.css文件中內(nèi)容
2. 修改App.jsx中內(nèi)容
import { Button } from 'antd';
function App() {
return (
<>
<Button type="primary">Button</Button>
</>
)
}
export default App
3. 頁面顯示：
3. 引入布局和菜單欄
1. 引入布局組件
1. 代碼
import React, { useState } from 'react';
import './App.css'
import { Button,Sider,Layout,Header,Space } from 'antd';
const headerStyle = {
textAlign: 'letft',
color: '#fff',
height: 64,
paddingInline: 10,
lineHeight: '64px',
backgroundColor: '#7dbcea',
};
const contentStyle = {
textAlign: 'center',
minHeight: 120,
lineHeight: '120px',
color: '#fff',
backgroundColor: '#108ee9',
};
const siderStyle = {
textAlign: 'center',
lineHeight: '120px',
color: '#fff',
backgroundColor: '#3ba0e9',
};
const App = () => {
return (
<Layout>
<Sider style={siderStyle}>
</Sider>
<Layout>
<Header style={headerStyle}>
</Header>
<Content style={contentStyle}>Content</Content>
</Layout>
</Layout>
);
};
export default App;
報錯：Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/antd.js?v=d0b75d53' does not provide an export named 'Header' (at App.jsx:3:36)
是因為引入方式不對：修改成就可以了，官網(wǎng)有我沒注意
import { Button, Layout, Space } from 'antd';
const { Header, Sider, Content } = Layout;
運行后發(fā)現(xiàn)多了默認樣式外邊距，修改默認樣式
使用在App.css中添加下面代碼，就解決了。
/* 更改默認樣式 */
body {
margin: 0;
}
2. 引入左側(cè)菜單欄組件
?? 1. 代碼（手寫代碼在最后）
?? 2. 運行后，點擊按鈕沒反應(yīng)
報錯：warning.js:19 Warning: [antd: Menu] inlineCollapsed not control Menu under
是因為位置設(shè)置錯誤，在Sider標簽上添加collapsed={collapsed}就可以了
?? 重新運行
3. 調(diào)整布局樣式
?? 1. 新建src/views/index.jsx。把原來App.jsx文件內(nèi)容轉(zhuǎn)移到新建的src/views/index.jsx中， 對App修改如下。注意引入jsx文件名字要大寫
?? 2. 運行后樣式
4. 添加動態(tài)路由設(shè)置
1. 集中react-router對比
* React-Router：
是一個通用的路由庫，適用于不同平臺的 React 應(yīng)用。 提供了一些router的核心API，包括Router, Route,
Switch等，但是它沒有提供 DOM 操作進行跳轉(zhuǎn)的API。
* React-Router-DOM：
而 React Router DOM 是 React Router 的 Web 版本，提供了與瀏覽器環(huán)境相關(guān)的路由組件和功能。 提供了
BrowserRouter,HashRouter , Route, Link等 API,可以直接操作DOM的事件控制路由。如點擊按鈕。
React Router DOM 是在 React Router 基礎(chǔ)上構(gòu)建的，用于在 Web 應(yīng)用中處理路由。它提供了與瀏覽器 URL
相關(guān)的功能，如基于瀏覽器歷史記錄的導(dǎo)航等。
* Reach Router：
它提供了類似于 React Router 的功能，但具有更簡單的 API 和更好的可訪問性支持。
2. 三種路由模式：HashRouter、BrowserRouter 和 MemoryRouter 都是 React Router 提供的路由組件
-
HashRouter組件：路徑上有"#"，
它使用 URL 的哈希部分（#）來管理路由。在使用 HashRouter 時，URL 中的哈希部分將被用作路由路徑，不會觸發(fā)瀏覽器的頁面刷新。這種方式適用于靜態(tài)網(wǎng)站或需要在不同環(huán)境中部署的應(yīng)用。 -
BrowserRouter組件：路徑上沒有"#"
它使用 HTML5 的 History API 來管理路由。 -
MemoryRouter：
它將路由信息存儲在內(nèi)存中，而不是 URL 中。MemoryRouter 適用于在內(nèi)存中管理路由狀態(tài)，例如在測試環(huán)境中進行單元測試或在非瀏覽器環(huán)境中使用 React Router。
2. 安裝/使用 React-Router-DOM
文檔：React-Router官方文檔可參考
* 安裝/引用：
-
安裝：
yarn add react-router-dom
-
引用：
import { BrowserRouter, Route, Link } from 'react-router-dom';
* 在導(dǎo)航組件中使用。 也可以新建routerAdmin.jsx作為管理router文件
動態(tài)路由完整代碼
?? 1. router文件
?? 2. App.jsx代碼
import React, { useState } from 'react';
///---引入ui-組件庫
import { Button, Menu, Layout } from 'antd';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
} from '@ant-design/icons';
///---引入路由組件
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import myRouter from './router/index'
const App = () => {
///---頁面邏輯
const { Header, Sider, Content } = Layout;
// --- 左側(cè)導(dǎo)航欄顯示隱藏邏輯
const [collapsed, setCollapsed] = useState(false);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
return (
<BrowserRouter>
<Layout hasSider={true}>
<Sider style={{
textAlign: 'center',
color: '#333',
backgroundColor: '#fff',
}} collapsed={collapsed} >
<Menu
mode="inline"
items={myRouter}
defaultSelectedKeys={['/purchase']} //默認選中key
onClick={(e) => {
console.log(e)
}}
style={{ height: '100%', }}
>
</Menu>
</Sider>
<Layout>
<Header style={{
textAlign: 'letft',
color: '#fff',
height: 50,
paddingInline: 10,
lineHeight: '50px',
backgroundColor: '#fff',
}}>
<Button
type="primary"
onClick={toggleCollapsed}
style={{
marginBottom: 16,
}}
>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</Button>
</Header>
<Content style={{
height: '100vh',
textAlign: 'center',
lineHeight: '120px',
backgroundColor: '#fff',
borderBottom: '1px solid #333'
}}>
<Routes>
<Route exact path="/" element={<Purchase />} />
<Route exact path="/purchase" element={<Purchase />} />
<Route exact path="/inventory" element={<Inventory />} />
<Route exact path="/roles" element={<RoleList />} />
<Route exact path="/roles/new" element={<NewRole />} />
<Route exact path="/settings/theme" element={<ThemeSettings />} />
</Routes>
</Content>
</Layout>
</Layout>
</BrowserRouter>
);
};
const Purchase = () => {
return <h1>Purchase Page</h1>;
};
const Inventory = () => {
return <h1>Inventory Page</h1>;
};
const RoleList = () => {
return <h1>Role List Page</h1>;
};
const NewRole = () => {
return <h1>New Role Page</h1>;
};
const ThemeSettings = () => {
return <h1>Theme Settings Page</h1>;
};
export default App;
?? 3.運行后頁面效果
react-vite-antd環(huán)境下新建項目之菜單欄和導(dǎo)航使
開發(fā)中報錯：warning.js:19 Warning: [antd: Menu] children will be removed in next major version. Please use items instead.
Ant Design 的 Menu 組件的 children 屬性將在下一個主要版本中被移除。這意味著在未來的版本中，你應(yīng)該使用 items 屬性來傳遞菜單項，而不是直接使用 Menu.Item 組件作為 Menu 組件的子元素。
如下新版本中使用時不對的：
修改成如下：
<Menu
mode="inline"
theme="dark"
items={items}
onClick={onClick}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
>
</Menu>
開發(fā)中報錯：index.jsx:14 Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/react-router-dom.js?v=e8aea50f’ does not provide an export named ‘useHistory’
- 沒有使用最新版本的“react-router-dom”模塊，npm升級模塊：npm update react-router-dom。
- 當如方法不對，應(yīng)該是“import { useHistory } from ‘react-router-dom’”。
- 如果以上兩種方式都無法解決問題，可以嘗試刪除“node_modules”文件夾，并重新安裝
- 如果上述方法都不能解決問題，你可以使用其他版本的“react-router-dom”模塊，或者嘗試使用其他的路由模塊。
開發(fā)報錯：TypeError: Cannot destructure property ‘basename’ of ‘React.useContext(…)’
是因為link標簽沒有被BrowserRouter標簽包裹
<BrowserRouter>
///此處寫link邏輯就可以了
</BrowserRouter>
開發(fā)踩坑： 配置好之后路由更新了，頁面沒有更新。
發(fā)現(xiàn)是Route屬性使用錯誤了， <Route exact path=“/” element={} />，我把element使用成component了，改了就可以了，
開發(fā)踩坑： react使用antd中刷新頁面時候 ，布局有閃爍，查找發(fā)現(xiàn)使用Sider標簽加載頁面會有閃爍
是由于 Sider 組件的初始狀態(tài)導(dǎo)致的。Sider 組件默認是收起狀態(tài)，當它在頁面加載時展開時，可能會導(dǎo)致頁面內(nèi)容重新布局，從而引起閃爍。官網(wǎng)又給出Layout 標簽屬性hasSider
文章來源：http://www.zghlxwxcb.cn/news/detail-657337.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-657337.html
到了這里，關(guān)于react-vite-antd環(huán)境下新建項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
