〇、模板git下載地址

下載即用的模板地址：
http:https://e.coding.net/uijiio/init_app/react_init_app.git
ssh:git@e.coding.net:uijiio/init_app/react_init_app.git
目前更新至:登錄與主頁跳轉(zhuǎn)，主頁包含菜單和容器區(qū)

一、搭建基礎(chǔ)空白React項目

1.準備工作

（1）安裝node（npm會在此過程自動安裝）

a、node.js

查看是否安裝npm命令：npm -v
更新npm命令：npm install npm
當前最高版本：
推薦使用的穩(wěn)定版本：

• 下載地址：https://nodejs.org/zh-cn/download/
• 全程下一步即可，安裝完成后到cmd運行npm -v和 node -v以驗證是否安裝成功，最后那個安裝工具的勾選建議不勾選
• 配置全局模塊路徑和緩存cache路徑
  因為默認安裝在c盤，不方便管理?，F(xiàn)將其更改至安裝目錄下：
  ①在安裝目錄下新建兩個文件夾：
  
  

  image.png
  
  ②然后在cmd執(zhí)行如下兩個命令：
  npm config set prefix "D:\Program Files\nodejs\node_global"注意這里的D盤路徑根據(jù)你的安裝路徑改變
  查看緩存目錄是否成功更改的方法：輸入命令npm config get cache
npm config set cache "D:\Program Files\nodejs\node_cache"注意這里的D盤路徑根據(jù)你的安裝路徑改變
  查看全局安裝目錄是否修改成功的方法：環(huán)境變量也修改之后一起測試
• 配置環(huán)境變量
  ①“環(huán)境變量” -> “系統(tǒng)變量”：新建一個變量名為 “NODE_PATH”， 值為“D:\Program Files\nodejs\node_global\node_modules”
  ②“環(huán)境變量” -> “用戶變量”：編輯用戶變量里的Path，將相應(yīng)npm的路徑（“C:\Users\用戶名\AppData\Roaming\npm”）改為：“D:\Program Files\nodejs\node_global”
• 測試：npm install webpack -g
  
  
  
  
  
  
  如圖所示就是設(shè)置成功了，文件正確安裝到了我想讓它安裝的位置。如果安裝過程中報錯，mikdr創(chuàng)建目錄失敗，那么大概率是你當前使用的賬戶對目錄不具有操作權(quán)限，那么：
  1.直接用管理員打開cmd重新跑命令
  2.給當前賬戶分配更多權(quán)限
  3.給你操作的目錄也就是node_cache和npm_global分配當前賬戶全部操作權(quán)限
• 參考文檔：https://www.cnblogs.com/matanzhang/p/11441693.html
  https://www.cnblogs.com/steamed-twisted-roll/p/11299429.html

other、npm

查看是否安裝npm命令：npm -v
更新npm命令：npm install npm
當前最高版本：
推薦使用的穩(wěn)定版本：

（2）安裝webpack

查看是否安裝webpack命令：wenpack -v
更新webpack命令：npm install webpack -g
當前最高版本：
推薦使用的穩(wěn)定版本：

（3）npm配置國內(nèi)鏡像

這是個可選項，反正直接用npm也挺快的

2.使用react腳手架創(chuàng)建基礎(chǔ)react項目

（1）保證node和webpack已經(jīng)安裝

（2）react版本升級后不再支持全局create-react-app

要執(zhí)行npm uninstall -g create-react-app進行卸載

（3）新建一個文件夾——創(chuàng)建空白項目

· cd到想要把新項目放置的目錄，例如d:進入D盤根目錄
或者直接把這個文件夾打開到vscode中
· 輸入npm init react-app project-name注意文件名不可包含大寫字母
回車即可安裝,默認創(chuàng)建為js項目
如果要創(chuàng)建ts項目，需要在命令后面添加--typescript，形如：npm init react-app project-name --typescript
· 控制臺上出現(xiàn)Happy Hacking！字樣表示安裝成功。
我們得到一個新項目，名為project-name，路徑在D盤根目錄之下

（4）試運行

用vscode打開d:\todolist會發(fā)現(xiàn)node_modules文件夾已經(jīng)存在
如果沒有，使用npm i或npm install進行安裝
所以此時選擇運行到終端，輸入npm start即可運行到瀏覽器
看到經(jīng)典的react項目初始界面

3.創(chuàng)建路由：登錄界面與頂部和側(cè)邊菜單

(1)操作app.js文件

• 已知入口是index.html文件，通過index.js把index.html和app.js綁定在一起。實際進來訪問的就是index.js里面的app.js
• app.js中我們不再寫內(nèi)容，因為內(nèi)容最多包含一個頁面，不能滿足我們從登錄頁面跳轉(zhuǎn)到主頁面的需求。我們在這里寫一個路由：（如果拿不到BrowserRouter, Route, Routes, Link等。要安裝react-router）

import logo from './logo.svg';
import './App.css';
import Login from './Login';
import IndexPage from './IndexPage';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';function App() {return (<div className="App"><header className="App-header"><BrowserRouter><Routes><Route exact path='/' element={<Login />} /><Route path='index/*' element={<IndexPage />} /></Routes></BrowserRouter></header></div>);
}export default App;

這里的意思是：路由為/時訪問Login頁面，路由為/*頁面時，訪問IndexPage頁面
我們訪問網(wǎng)址，不輸入確切的路由時，就會訪問/路由，相當于跳轉(zhuǎn)至登錄頁面

（2）攔截路由與重定向

如果直接通過拼接url想要越過登錄直接訪問主頁，就需要我們手動攔截并且進行重定向了

（3）編碼主頁和登錄頁面

這個按需來，直接復(fù)制app.js名字改一下，內(nèi)容區(qū)分一下，就可以了

（4）用Link進行路由跳轉(zhuǎn)

import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import { Button, Menu } from 'antd'function Login() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>這兒是登錄界面！！</p><Link to='/index'>< Button>咱們?nèi)ブ黜?lt;/Button> </Link></header></div>);
}export default Login;

(5)子頁面內(nèi)層路由

• 到這里我們已經(jīng)有了一個路由器，該路由器用于在登錄頁和主頁之間切換，但是主頁自己也是菜單+內(nèi)容頁 的形式，內(nèi)容頁由多個頁面切換，需要一個內(nèi)層的路由器
• 實現(xiàn)方法：
  ①在指定位置添加這些路由
  ②編寫跳轉(zhuǎn)按鈕

import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Route, Routes, Link, NavLink } from 'react-router-dom';
import Page1 from './Page1'
import Page2 from './Page2'
import { Button } from 'antd'
function App() {return (<div><div style={{ width: '60vw', height: '100%', border: '2px solid pink',backgroundColor:"green" }}><Link to='page1'><Button style={{ width: '100%' }}>導(dǎo)航1</Button></Link><NavLink to='page2'><Button style={{ width: '100%' }}>導(dǎo)航2</Button></NavLink></div><div style={{ width: "60%", height: "40vh", backgroundColor: "red" }}><Routes><Route path='page1' element={<Page1 />} /><Route path='page2' element={<Page2 />} /></Routes></div></div>);
}export default App;

上面是導(dǎo)航區(qū)，下面是內(nèi)容區(qū)↑navlink和link的區(qū)別后續(xù)再研究，目前已知navlink多個導(dǎo)航高亮效果，也就是所謂的設(shè)置為active

二、安裝開發(fā)所需插件庫

1.必須插件庫

（1）antd及組件樣式

a.安裝

作為阿里開發(fā)維護的組件庫，antd是非常好用的
安裝antd命令：npm add antd
安裝完畢后，試著引入一個按鈕到頁面上，看看效果：發(fā)現(xiàn)很丑，沒變化。原因在于還沒有引入antd的樣式組件。
antd樣式引入import 'antd/dist/antd.css'，只需要在入口的index.js文件中引入就行了，其他文件無需引入

b.使用

import {Button} from 'antd
<Button>按鈕</Button>

（2）路由router

a、安裝react router

npm install react-router-dom --save

b、使用react-router

• 路由攔截可參考博客：
  https://zhuanlan.zhihu.com/p/162942121

（3）公共狀態(tài)管理庫Redux

（4）數(shù)據(jù)請求Axios

（5）引入less預(yù)處理器

a.引入less

npm install craco-less --save --force注意，只有版本不匹配，報錯時，才可能需要加上--forve

b.使用less

這里要修改配置文件，下次補充

2.可能需要的插件庫

（1）antd的icon圖標庫

a.安裝

npm install --save @ant-design/icons

b.使用

import { PlusOutlined } from '@ant-design/icons'
<PlusOutlined />