一、介绍 📖

🚀🚀🚀 猪猪管家， 基于 React18.2.0、webpack5.0.1、react-router-dom6.6.2、TypeScript、Ant-Design 开源的一套后台管理框架。recoil 作为状态管理，axios 作为网络请求，开箱即用，支持配置多种菜单模式，路由权限配置。

二、Git 仓库地址 (欢迎 Star⭐)

• GitHub：https://github.com/bigTig/react-webpack-ts.git

三、🔨🔨🔨 项目功能

• 🚀 采用最新技术找开发：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 }} # 目标目录

尝试了N遍，差点就放弃了。希望可以帮到大家。

开源项目，喜欢的可以给个 Git 仓库地址 (欢迎 Star⭐)