常用命令
npx create-react-app my-app
npm i @reduxjs/toolkit react-redux
npm i react-router-dom
npm i sass -D
npm i axios classnames echarts
cd my-app
npm start
文件夹配置
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9667da73ae494562a68e7ff0b80e4584.png)
安装ant
网站:https://ant.design/index-cn/
# 1. 安装
npm i antd --save
# 使用, 导入渲染
import { Button } from "antd"
function App() {
return (
<div>
this is app <Button type="primary">test</Button>
</div>
)
}
export default App
配置@路径
# 1. 安装craco
npm i -D @craco/craco
# 2. 配置在项目根目录增加craco.config.js
const path = require("path")
module.exports = {
webpack: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
}
# 3. 配置命令修改项目根目录package.json
"scripts": {
# react-scripts改成craco
"start": "craco start",
"build": "craco build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
# 4. 使用@就表示项目根目录
@/xxx
# 5. vscode配置目录联想,在项目根目录增加jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"scr/*"
]
}
}
}
浏览器样式reset
# 安装
npm install normalize.css
# 在入口js里导入, scr/index.js
import normalize.css
# 配置高度铺面浏览器,scr/index.scss
html,
body {
margin: 0;
height: 100%;
}
#root {
height: 100%;
}