React18+Vite4+Zustand4 后台管理系统搭建🎉

前言

老板：搞个管理系统，我明天就要。 前端：没空，谁爱做谁做！(小声bb) 老板：（突然抬头）你说什么？ 前端：好的老板

用后端的话来说，一个管理系统而已 要不是人手不够，后端也能做。看吧，前端就是这么人微言轻~ 该干的活还是得干。

起步

# 使用ant design pro
npm i @ant-design/pro-cli -g
pro create myapp

ok，启动项目，完成！但真的这么美好吗？

问题

上面我们用了antd pro创建了一个react项目，看似很美好简单，但其实存在以下的问题(个人观点)

1. 集成了dva，基于 redux 和 redux-saga 的数据流方案，dva 还额外内置了 react-router 和 fetch
2. 项目代码的配置、插件、组件过于繁琐 就好比下载一个360软件，你电脑上就会多出n个软件的感觉
3. 采用webpack打包，虽说umi3.5采用mfsu，但也是基于webpack5且对应的issue也是非常之多

看张图感受一下👇

这种数据流方案怎么样？是不是又臭又长，基本每个文件都要写每次都要connect、dispatch，而且这种还算好的，有的更是多的离谱！

方案

基于上面种种的不爽，所以还是自己搭建一个管理系统吧，相信你项目中的代码也会有不爽的地方可以分享下你的解决方案，欢迎下方留言探讨啊🤞

技术选型

• vite v4：下一代的前端工具链，为开发提供极速响应
• react v18：react18也是更新了很多好用的hook
• zustand v4：一个非常好用的状态管理库
• react router v6
• typescript

这里对zustand做个简单的了解，有点类似于mobx并且支持各种中间件

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

这就是一个最简单的store -> ui，是不是特别方便且是以hook的形式在组件中使用，对react技术栈的童鞋简直不要太友好🎉，官方也横向对比redux，Why zustand over redux? 具体可以查看官方文档

再来看下中间件

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

export const useBearStore = create(
  persist(
    (set, get) => ({
      bears: 0,
      addABear: () => set({ bears: get().bears + 1 }),
    }),
    {
      name: 'food-storage',
    }
  )
)

通过persist中间件，可以实现本地持久化存储，刷新页面会自动将本地数据装载到store中。以往做法，刷新页面取出localstorage中的数据存储到store中，这一套下来挺繁琐的，这样看来是不是感觉还挺棒👏👏👏

项目地址

一个轻量级 React18 后端管理模板，旨在快速搭建后端管理系统包含基础功能不做过渡封装，快速扩展。家人们，咱们主打就是简洁快速！

目录结构

├─ public                     # 静态资源
│   ├─ favicon.ico            # favicon图标
├─ src                        # 项目源代码
│   ├─ components             # 全局公用组件
│   ├─ layout                 # 布局组件
│   ├─ config                 # 全局配置
│   │   └─ router.tsx         # 路由配置
│   ├─ services               # api接口
│   ├─ stores                 # 全局 store管理
│   ├─ utils                  # 全局公用方法
│   ├─ pages                  # pages 所有页面
│   ├─ App.tsx                # 入口页面
│   ├─ global.d.ts            # 全局声明文件
│   ├─ index.css              # 全局样式文件
│   └─index.tsx               # 源码入口
└── .commitlintrc.js          # 自定义commitlint
└── .cz-config.js             # 自定义commitlint
└── .eslintignore             # eslint忽略文件
└── .eslintrc.js              # eslint配置
└── .prettierrc.js            # prettier配置
└── vite.config.js            # vite打包配置
└── index.html                # html模板
└── package.json              # package.json

安装及使用

# 克隆项目
git clone https://github.com/panyushan-jade/react-template-admin.git

# 进入项目目录
cd react-template-admin

# 安装依赖
pnpm install(推荐使用pnpm)

# 启动
pnpm start

# 构建
pnpm build

# 预览build产物
pnpm preview

支持的功能

• 登录/退出登录
• 数据持久化存储
• 路由鉴权
• 动态主题
• 错误处理
• axios 封装

预览

题外话

项目使用的是pnpm，pnpm对比npm和yarn有很明显的优势，建议大伙都用起来吧。不过 建议node版本14+。此外如果遇见node、pnpm、yarn等版本问题，这里推荐一个JavaScript工具管理器 Volta。用了都知道，简直不要太香，nvm可以换掉了。

最后

目前项目还是在迭代和维护中，肯定有很多的不足以及问题，欢迎留言及pr。非常非常非常感谢🤞🤞🤞，如果你觉得这个项目还不错，点个 star ⭐️ 支持一下 thanks~ 项目地址