Use vite to build a scaffolding of the middle and backstage system

Build a scaffolding of the middle and backstage system

• Warehouse address https://github.com/percy507/vite-react-admin

• building scaffolding

  • Learn new technologies such as vite and recoil
  • More complex components commonly used in packaging projects
  • Learn certain front-end architecture capabilities

Build command

Npm and yarn configure the new version of husky (v7.0.1+) differently, we only use npm here

https://typicode.github.io/husky/#/?id=usage

npm i -d              # 装依赖
npm run dev           # 本地开发
npm run build:dev     # 开发服务器生产环境打包
npm run build:test    # 测试服务器生产环境打包
npm run build:prod    # 生产服务器生产环境打包
npm run preview       # 本地打包并预览打包后的页面

npm run deploy        # 将打包后的代码推送到github远程仓库，以便预览
# deploy 这里使用了 gh-pages依赖
# 由于 github pages 的局限性，项目里只能使用 HashRouter，实际项目可替换为 BrowserRouter

Core dependency

# 主要使用到的依赖
Vite          v2.1.0+           一种新型前端构建工具
React         v17.0.0+          前端框架
recoil        v0.4.0            React 状态管理库
antd          v4.16.10+         React UI 组件库
Typescript    v4.2.1+           为JavaScript提供强大的类型系统

use it with caution in production environment 161189f6028449

When Recoil is going to stop being experimental?

# 部署打包后的代码至 github Pages
gh-pages

# 代码提交、校验、格式化的相关工具
husky         v7.0.1+           一款简化使用git hook的工具
lint-staged   v11.1.2+          为git暂存区文件执行指定的校验程序
Eslint        v7.22.0+          校验js、jsx、ts、tsx代码
Prettier      v2.2.1+           格式化代码
stylelint     v13.13.1+         校验css、less代码
commitlint    v13.1.0+          校验commit信息

# commitlint
@commitlint/cli                           提供commitlint命令校验提交信息规范
@commitlint/config-conventional           提供commit信息规则

# eslint插件
eslint-plugin-react                       提供一些用于校验react代码的规则
eslint-plugin-simple-import-sort          eslint插件，用于自动对import、export语句以一定的规则排序
@typescript-eslint/parser                 一种eslint解析器，用于支持eslint解析typescript
@typescript-eslint/eslint-plugin          提供一些用于校验typescript代码的规则
eslint-config-prettier                    禁用非必要的以及与prettier有冲突的规则

# stylelint插件
stylelint-config-standard                 提供一些常用的CSS编写规则
stylelint-order                           强制按照某个顺序编写css
stylelint-config-rational-order           提供一种css编写顺序的规则
stylelint-config-prettier                 禁用非必要的以及与prettier有冲突的规则

Component

• core component

  • MenuList: Menu component. Configuration data used to render the top menu and sidebar menu
  • Authorized: Authorized component. At the same time, a hasPermission function is exposed for logical permission judgment
  • ErrorBoundary: Error boundary component. Used to degrade and display the error UI after an error is reported in the rendering of the sub-component tree
  • Exception: Common component of exception page. Such as 404 page, 403 page, 500 page, etc.
  • IconFont: Custom icon component. Icon data is obtained from iconfont.cn
  • PageWrapper: General page wrapping layer component.
  • RouteList: routing components. Configuration data for rendering routing

• custom business component

  • IframeComponent: iframe component. Used to render html string
  • QuillEditor: Rich text editor

hooks

• useMenuStatus: Get the menu item that is opened and selected by default in the current sidebar menu

Architecture design

Catalog design

.config         # 存储husky以及各种linter的配置文件
.vscode         # vscode当前工作空间配置目录
src
  @types        # 存储可用于全局的类型声明文件
  assets        # 静态资源目录
  components    # 组件目录
  hooks         # 自定义hooks目录
  layouts       # 存储页面布局
  pages         # 存储具体页面
  recoil        # 按模块存储recoil状态文件
  services      # 存储调接口的文件
  styles        # 存储一些全局的样式或变量
  utils         # 存储工具函数

In order to extract the various linter configuration files .config directory was created

The linter configuration file is used in two ways:

• vscode related plugin call: .vscode/settings.json
• npm rely call: package.json in scripts a command in the field and lint-staged field

Routing and permission naming design

# 路由命名设计
# 如果有多个layout，则layout为第一个path
/layout/first-menu/[second-menu]/other
/布局名称/一级菜单/二级菜单(可能没有)/其他子路径

# 权限命名格式
布局名称__[一级菜单]__[二级菜单]__[其他]

# 权限控制（前端）
菜单、路由、页面按钮或子模块
封装权限组件、权限判断函数

# 权限控制（后端）
接口权限控制
接口里面某些字段的权限控制（数据权限控制）

# 如果要侧边栏或顶部菜单、权限配置化，存后端
可参考 https://github.com/javaLuo/react-admin

Notes on packaging code

css（预处理器、css modules）
服务器生产环境区分(dev,test,prod)
公共代码抽离
基于路由进行代码拆分