%20(2).svg)
项目简介
本项目是基于 React 框架搭建的博客系统。运用 React Router 进行路由管理，Redux 进行状态管理，Ant Design 作为 UI 库，axios 用于请求后端 API。此外，还进行了 less 配置和请求封装，解决了跨域问题，并集成了 mapbox-gl 地图功能。
项目的主要特性和功能
- 采用 React Router 实现多页面路由切换。
- 利用 Redux 管理应用状态，方便数据共享与更新。
- 使用 Ant Design 构建美观且易用的用户界面。
- 封装 Request 请求，通过 axios 与后端 API 交互。
- 支持 less 样式编写，可自定义主题颜色。
- 集成 mapbox-gl 地图，提供更丰富的展示形式。
安装使用步骤
安装依赖
在项目根目录下，运行以下命令安装所需依赖：
bash
npm i antd @reduxjs/toolkit react-redux react-router-dom@6 axios less less-loader@6.0.0 --save
npm add react-app-rewired customize-cra babel-plugin-import
npm install -g serve
npm install mapbox-gl --save
配置文件修改
- 新建
config-overrides.js文件，内容如下： ```javascript const { override, fixBabelImports, addLessLoader, adjustStyleLoaders, } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
},
}),
adjustStyleLoaders(({ use: [, , postcss] }) => {
const postcssOptions = postcss.options;
postcss.options = { postcssOptions };
})
);
2. 修改 `package.json` 文件中的 `scripts` 字段：json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
3. 在 `webpackDevServer.config.js` 中配置跨域代理：javascript
proxy: {
'/api': {
target: 'http://47.93.114.103:6688/manage',
changeOrigin: true,
pathRewrite: { '^/api': '/' },
},
}
``
同时将request.js中的baseURL改为/api`。
启动项目
运行以下命令启动开发服务器：
bash
npm start
在浏览器中访问 http://localhost:3000 即可查看项目。
打包项目
运行以下命令进行项目打包：
bash
npm run build
打包完成后，可使用 serve 命令部署静态文件：
bash
serve -s build
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】