4

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

 3 years ago
source link: https://segmentfault.com/a/1190000040517179
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

搭个中后台系统的脚手架

  • 仓库地址 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)
公共代码抽离
基于路由进行代码拆分

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK