一、創(chuàng)建項(xiàng)目
先創(chuàng)建項(xiàng)目：create-react-app 項(xiàng)目名，然后換個(gè)圖標(biāo)，換個(gè)標(biāo)題
配置jsconfig.json：這個(gè)文件在Vue通過(guò)腳手架創(chuàng)建項(xiàng)目時(shí)自動(dòng)生成, React是沒(méi)有自動(dòng)生成, jsconfig.json是為了讓vs code的代碼提示更友好, 按需求決定是否配置;
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"jsx": "preserve",
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
二、目錄結(jié)構(gòu)
對(duì)src文件夾的目錄進(jìn)行初始化：
assets: 存放靜態(tài)資源 (如css, img等等)
baseUI: 存放一些通用的組件, 不只是本項(xiàng)目, 其他項(xiàng)目也會(huì)使用的組件
components: 存放本項(xiàng)目中通用的組件
hooks: 自定義的hook函數(shù)
router: 路由相關(guān)
services: 網(wǎng)絡(luò)請(qǐng)求相關(guān)
stores: 狀態(tài)管理, redux相關(guān)
utils: 封裝的工具函數(shù)
views: 頁(yè)面相關(guān)
三、craco配置別名并安裝less
1.craco安裝
1、安裝craco：npm install craco
修改package.json：
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
????????????
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
2.配置別名
在項(xiàng)目中層級(jí)嵌套會(huì)很深, 我們導(dǎo)入文件通常會(huì)有../../../甚至更多的上一級(jí)目錄; 因此我們配置別名解決這個(gè)問(wèn)題, 我的配置是使用@符號(hào)表示根目錄文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-402587.html
在項(xiàng)目根目錄創(chuàng)建一個(gè) craco.config.js 用于修改默認(rèn)配置，該文件中的一些配置（如webpack）會(huì)和腳手架中的配置合并。修改別名的操作如下：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-402587.html
const path = require('path');
module.exports = {
webpack: {
alias: {
"@": path.resolve(__dirname, 'src'),
'components': path.resolve(__dirname, 'src/components'),
'store':path.resolve到了這里，關(guān)于React項(xiàng)目規(guī)范：目錄結(jié)構(gòu)、根目錄別名、CSS重置、路由、redux、二次封裝axios的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[ app.json 文件內(nèi)容錯(cuò)誤] app.json: 在項(xiàng)目根目錄未找到 app.json](https://imgs.yssmx.com/Uploads/2024/02/504243-1.png)
![HbuilderX 打開(kāi)小程序 報(bào)錯(cuò)[ app.json 文件內(nèi)容錯(cuò)誤] app.json: 在項(xiàng)目根目錄未找到 app.json](https://imgs.yssmx.com/Uploads/2024/01/805862-1.png)
![uni-app項(xiàng)目在微信開(kāi)發(fā)者工具打開(kāi)時(shí)報(bào)錯(cuò)[ app.json 文件內(nèi)容錯(cuò)誤] app.json: 在項(xiàng)目根目錄未找到 app.json](https://imgs.yssmx.com/Uploads/2024/02/592932-1.png)
![[ app.json 文件內(nèi)容錯(cuò)誤] app.json: 在項(xiàng)目根目錄未找到 app.json (env: Windows,mp,1.06.2210310； lib: 2.30.1)](https://imgs.yssmx.com/Uploads/2024/02/512611-1.png)
