一、介绍 ??
?????? 猪猪管家， 基于 React18.2.0、webpack5.0.1、react-router-dom6.6.2、TypeScript、Ant-Design 开源的一套后台管理框架。recoil 作为状态管理，axios 作为网络请求，开箱即用，支持配置多种菜单模式，路由权限配置。
二、Git 仓库地址 (欢迎 Star?)
三、?????? 项目功能
- ?? 采用最新技术找开发：React18、React-Router v6、React-Hooks、TypeScript、Webpack5
- ?? 采用 Webpack 作为项目开发、打包工具（配置了 Gzip 打包、打包预览工具……）
- ?? 整个项目集成了 TypeScript ??
- ?? 使用 recoil 做状态管理，集成 redux-persist 开发
- ?? 使用 TypeScript 对 Axios 整个二次封装 （全局错误拦截、常用请求封装、取消重复请求……）
- ?? 支持 暗黑 && 亮色切换，mix、side、top 菜单模式、不同主题色切换
- ?? 使用 自定义高阶组件 进行路由权限拦截（403 页面）
- ?? 支持 React-Router v6 路由懒加载配置、菜单手风琴模式、无限级菜单、多标签页、面包屑导航
- ?? 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范（项目规范配置）
- ?? 使用 husky、lint-staged、commitlint、commitizen、cz-git 规范提交信息（项目规范配置）
四、项目预览
image.png
image.png
自动部署到 腾讯云轻量服务器
# 一个 workflow，名为 Deploy
name: Deploy
on: # 此 CI/CD 触发时的事件
push: # 在代码提交时自动触发
branches: - develop # 触发的分支
# 一个 CI/CD 的工作流有许多 jobs 组成，比如最典型的 job 是 lint，test，build。
jobs:
build-and-deploy: # 构建 job
runs-on: ubuntu-latest # 跑 workflow 的服务器系统
steps: # job的一系列动作
# 切换分支获取源码
- name: Checkout # step的名称，将会在 github action 的控制台中显示
uses: actions/checkout@v3 # 选择一个action，可以理解为若干 steps.run，有利于代码复用
# 安装使用 node:14.18.0
- name: Node
uses: actions/setup-node@v3
with:
node-version: 14.18.0 # node版本
# 运行命令，npm install
- name: Install
run: node -v && yarn
# 运行命令，npm run build
- name: Build
run: yarn build
# 部署到腾讯云服务器
- name: Upload files to server
uses: appleboy/scp-action@master
with:
host: ${{ secrets.SERVER_SSH_HOST }} # 服务器域名
username: ${{ secrets.SERVER_SSH_USER }} # 腾讯云默认用户名为root
key: ${{ secrets.SERVER_SSH_KEY }} # 本地.ssh文件下的私钥id_rsa，存在secrets中
source: './dist' # 源目录，相对于$GITHUB_WORKSPACE根目录的路径
target: ${{ secrets.SERVER_SSH_TARGET }} # 目标目录
