【源码】基于 React 框架的内容管理系统

项目简介

本项目是基于 React 框架构建的内容管理系统，采用前后端分离设计，具备高度灵活性与可扩展性。运用多种 React 相关优化技术，为用户提供功能丰富、使用便捷的平台，用于内容的创建、发布与管理。

项目的主要特性和功能

1. 路由鉴权：未登录用户无法进入首页，保障系统内容安全。
2. 富文本编辑：集成富文本编辑器，便于用户创建高质量内容。
3. 请求管理：使用 axios 进行 HTTP 请求，设置请求和响应拦截器，统一处理 token 挂载和失效问题。
4. 路径配置：配置 @ 绝对路径，方便模块引用，提升开发效率。
5. 路由跳转：支持组件外路由跳转，可在响应拦截器中实现路由切换。
6. 打包优化：支持项目打包、本地预览、打包体积分析，可通过配置 CDN 和路由懒加载优化项目性能。

安装使用步骤

依赖安装

1. 下载并解压项目源码文件。
2. 安装 sass：yarn add sass -D
3. 安装配置 @ 路径的插件：yarn add @craco/craco -D
4. 安装 axios：yarn add axios
5. 安装富文本编辑器：yarn add react-quill@2.0.0-beta.2
6. 安装分析打包体积的包：yarn add source-map-explorer

配置文件

1. 根目录创建 craco 配置文件 craco.config.js。
2. 修改 package.json 文件中的脚本命令（start、build、test）。
3. 根目录下创建 jsconfig.json。

启动项目

重启项目使配置生效，然后运行 yarn start 启动前端服务。

项目打包与预览

1. 打包项目：在项目根目录下，运行 yarn build。
2. 全局安装本地服务包：npm i -g serve
3. 启动本地服务：serve -s ./build
4. 在浏览器中访问 http://localhost:3000/ 预览项目。

打包体积分析

1. 在 package.json 中的 scripts 标签中添加 "analyze": "source-map-explorer 'build/static/js/*.js'"。
2. 对项目打包（若已打包可省略）：yarn build
3. 运行分析命令：yarn analyze
4. 通过浏览器打开的页面分析图表中的包体积。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】