乐趣区

关于vite:使用vite搭个中后台系统的脚手架

jiezi

搭个中后盾零碎的脚手架

  • 仓库地址 https://github.com/percy507/v…

  • 搭建脚手架目标

    • 学习 vite、recoil 等新技术
    • 封装我的项目中罕用的较简单的组件
    • 学习肯定的前端架构能力

构建命令

npm 与 yarn 对新版 husky（v7.0.1+）的配置形式不太雷同，咱们这里只应用 npm

https://typicode.github.io/hu…

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

外围依赖 

# 次要应用到的依赖
Vite          v2.1.0+           一种新型前端构建工具
React         v17.0.0+          前端框架
recoil        v0.4.0            React 状态治理库
antd          v4.16.10+         React UI 组件库
Typescript    v4.2.1+           为 JavaScript 提供弱小的类型零碎

留神: recoil v0.4.0 还不是稳定版，审慎用于生产环境

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 有抵触的规定

组件

  • 外围组件

    • MenuList: 菜单组件。用于渲染顶部菜单与侧边栏菜单的配置化数据
    • Authorized: 权限组件。同时暴露出一个 hasPermission 函数用于逻辑上的权限判断
    • ErrorBoundary: 谬误边界组件。用来在子组件树渲染报错后，降级显示谬误 UI
    • Exception: 异样页通用组件。比方 404 页面、403 页面、500 页面等
    • IconFont: 自定义图标组件。图标数据从 iconfont.cn 获取
    • PageWrapper: 通用页面包裹层组件。
    • RouteList: 路由组件。用于渲染路由的配置化数据

  • 自定义业务组件

    • IframeComponent: iframe 组件。用来渲染 html 字符串
    • QuillEditor: 富文本编辑器

hooks

  • useMenuStatus: 获取以后侧边栏菜单默认被关上、选中的菜单项

架构设计

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

为了抽离我的项目根目录下各种 linter 的配置文件 ，才创立 .config 目录

linter 配置文件被应用的两种形式:

  • vscode 相干插件调用 : .vscode/settings.json
  • npm 依赖调用 : package.json 中的 scripts 字段下的某个命令以及 lint-staged 字段
路由、权限命名设计 
# 路由命名设计
# 如果有多个 layout，则 layout 为第一个 path
/layout/first-menu/[second-menu]/other
/ 布局名称 / 一级菜单 / 二级菜单 (可能没有)/ 其余子门路 
# 权限命名格局
布局名称__[一级菜单]__[二级菜单]__[其余]

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

# 权限管制（后端）接口权限管制
接口外面某些字段的权限管制（数据权限管制）
# 如果要侧边栏或顶部菜单、权限配置化，存后端
可参考 https://github.com/javaLuo/react-admin
打包代码的注意事项 
css（预处理器、css modules）服务器生产环境辨别 (dev,test,prod)
公共代码抽离
基于路由进行代码拆分
退出移动版