# react_vite **Repository Path**: linyuan824/react_vite ## Basic Information - **Project Name**: react_vite - **Description**: REACT-VITE 是一款开源企业级的中后台管理系统框架[纯前端]; 项目基于 React18, Vite V5, TypeScript, zustand, tailwindcss, less, Antd V5 等前端最新技术栈; 项目含有相关代码注释以及大量的案例, 学习成本非常低; 此模板适合企业级项目, 中小型项目, 个人项目及毕业设计; - **Primary Language**: TypeScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 4 - **Forks**: 1 - **Created**: 2025-01-05 - **Last Updated**: 2025-07-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: React, TypeScript, vite, zustand, Tailwind ## README ## 1 使用 nvmd 安装 node 环境 - nvmd 安装地址: https://github.com/1111mp/nvm-desktop/releases ## 2 简介 - REACT-VITE 是一款开源企业级的中后台管理系统框架[纯前端]; - 项目基于 React V18, Vite V5, TypeScript, zustand, tailwindcss, less, Antd V5 等前端技术栈; - 项目含有相关代码注释以及大量的案例, 学习成本非常低; - 此模板适合企业级项目, 中小型项目, 个人项目及毕业设计; ## 3 项目启动与打包及代码提交 ```shell # Node 版本: Node >= v18; 推荐版本 18.19.0 # 下载依赖 (项目已进行了 npm 镜像源配置) npm i # 启动 npm run dev # 打包 npm run build # 代码提交; 提交信息不符合 commitlint 规则时, 会进行报错提示 # 使用该命令可自动生成符合 commitlint 规则的提交信息 npm run commit ``` ## 4 项目目录 ```shell ├── .husky │ ├── commit-msg # 执行 commitlint │ └── pre-commit # 项目提交代码前的操作 ├── .vscode ├── dist # 项目打包目录 ├── mock # 项目 mock 数据 │ ├── _db.json # 假数据 │ ├── _mock.d.ts # mock 类型 │ ├── _utils.ts # mock 工具函数 │ └── user.ts ├── node_modules ├── public # 项目公用文件 ├── src │ ├── apis # 项目接口目录 │ ├── assets # 项目静态资源目录 │ ├── components # 项目公用组件 │ │ ├── AntdForm.tsx # 二次封装 AntdForm │ │ ├── AntdTable.tsx # 二次封装 AntdTable │ │ ├── AuthComponent.tsx # 权限组件 │ │ ├── IconComponents.tsx │ │ ├── Loading.tsx # 加载中组件 │ │ ├── MainLayout.tsx # 页面布局组件 │ │ ├── NotFound.tsx # 路由未匹配时的页面 │ │ └── ReactECharts.tsx # echarts-for-react 组件 │ ├── constants │ │ └── global.ts # 项目公用常量 │ ├── hooks # 项目 hooks │ ├── pages # 项目页面组件 │ │ ├── Home.tsx │ │ ├── Login.tsx │ │ └── Register.tsx │ ├── types # 项目类型文件 │ │ ├── user.d.ts │ │ └── zustand.d.ts │ ├── utils # 项目全局工具函数 │ │ ├── array.ts │ │ ├── crypto.ts │ │ ├── request.ts │ │ └── store.ts │ ├── zustand # zustand 存储库 │ │ ├── index.ts │ │ ├── useLayout.ts │ │ └── useUserInfo.ts │ ├── App.tsx # App 页面 │ ├── global.less # 全局样式 │ ├── main.tsx # 页面入口文件 │ ├── router.tsx # 页面路由配置 │ └── vite-env.d.ts ├── .editorconfig ├── .env.development ├── .env.production ├── .gitignore ├── .lintstagedrc ├── .npmrc ├── .nvmdrc ├── .nvmrc ├── .prettierignore ├── .prettier.cjs ├── commitlint.config.cjs ├── eslint.config.js ├── index.html ├── LICENSE ├── package-lock.json ├── package.json ├── postcss.config.js ├── README.md ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ``` ## 5 项目技术栈及相关技术栈配置文件 - react V18 - react-router V6 - antd V5: 项目使用的组件库 - mac-scrollbar: 项目滚动条美化组件 - less: vite 提供了对 less 的支持, 只需安装 less 即可使用 - tailwindcss: 一种原子化 css 方案; 配置文件 tailwind.config.js - dayjs: 项目日期处理的 js 工具库 - zustand V5: zustand 相关都在 src/zustand 目录 - pixiu-number-toolkit: 项目处理数字相关的 js 工具库 - crypto-js: crypto-js 相关都在 src/utils/crypto.ts 文件 - axios: 项目请求的 js 工具库; 配置文件: src/utils/request.ts - echarts V5, echarts-for-react: 以组件形式使用 echarts; 封装在 src/components/ReactECharts.tsx 文件 - vite V5: 配置文件 vite.config.ts - eslint V9: 配置文件 eslint.config.js - prettier V3: 配置文件 .prettierrc.cjs .prettierignore - typeScript V5: 配置文件 tsconfig.app.json tsconfig.json tsconfig.node.json ## 6 系统工具 ### 6.1 array.ts ```ts /** * 将对象数组转成多维对象数组 * @param arr 要转成多维数组的数组 * @param id 自身 id 字段 * @param pid 父级 id 字段 * @param children 存放子元素的字段, 默认为 children * @returns 转换后的多维数组 */ export const arrToMulArr = (arr: any[], id = 'id', pid = 'pid', children = 'children'): any[] /** * 多维对象数组扁平化 * @param arr 要扁平化的对象数组 * @param children 存放子元素的字段, 不传时默认为简单数组 * @returns 扁平化后的一维对象数组 */ export const flatDeep = (arr: any[], children?: string): any[] ``` ### 6.2 crypto.ts ```ts /** * AES 加密 * @param str 要加密的字符串 * @param AESKEY AES 加密密钥 * @param AESIV AES 加密 iv * @returns 加密后的字符串 */ const encryptAES: ( str: string, AESKEY?: CryptoJS.lib.WordArray, AESIV?: CryptoJS.lib.WordArray ): string /** * AES 解密 * @param str 要解密的字符串 * @param AESKEY AES 解密密钥 * @param AESIV AES 解密 iv * @returns 解密后的字符串 */ const decryptAES: ( str: string, AESKEY?: CryptoJS.lib.WordArray, AESIV?: CryptoJS.lib.WordArray ): string ``` ### 6.3 store.ts ```ts // ------------------------------ localStorage ------------------------------ /** * 向 localStorage 中存数据 * @param name 数据名称 * @param value 数据值 * @param isEncrypt 是否需要加密; 默认生产环境自动加密 */ function localSetItem(name: string, value: T, isEncrypt?: boolean): void /** * 从 localStorage 中取数据 * @param name 数据名称 * @param isEncrypt 是否需要解密; 默认生产环境自动解密 * @returns 取出的数据 */ function localGetItem(name: string, isEncrypt?: boolean): T | void /** * 从 localStorage 中删除数据 * @param name 要移除的数据名称 */ const localRemoveItem: (name: string): void /** * 清空 localStorage */ const localClear: (): void // ------------------------------ sessionStorage ------------------------------ /** * 向 sessionStorage 中存数据 * @param name 数据名称 * @param value 数据值 * @param isEncrypt 是否需要加密; 默认生产环境自动加密 */ function sessionSetItem(name: string, value: T, isEncrypt?: boolean): void /** * 从 sessionStorage 中取数据 * @param name 数据名称 * @param isEncrypt 是否需要解密; 默认生产环境自动解密 * @returns 取出的数据 */ function sessionGetItem(name: string, isEncrypt?: boolean): T | void /** * 从 sessionStorage 中删除数据 * @param name 要移除的数据名称 */ const sessionRemoveItem: (name: string): void /** * 清空 sessionStorage */ const sessionClear: (): void // ------------------------------ cookie ------------------------------ /** * 向 cookie 中存数据 * @param name 数据名称 * @param value 数据值 * @param opts cookie 配置项 */ function cookieSetItem(name: string, value: T, opts?: Cookies.CookieAttributes): void /** * 从 cookie 中取数据 * @param name 数据名称 * @returns 取出的数据 */ function cookieGetItem(name: string): T | void /** * 从 cookie 中删除数据 * @param name 要移除的数据名称 * @param opts cookie 配置项 */ const cookieRemoveItem: (name: string, opts?: Cookies.CookieAttributes): void /** * 清空 cookie */ const cookieClear: (): void ```