/reality_frontend

简易物业系统

Primary LanguageTypeScript

介绍

架构

项目目录规范

目录规范和**源至于下面这篇文章

Inspired by https://phodal.github.io/clean-frontend/

Example

基础目录

.
├── dist // build 的目录
│ ├── assets // 静态资源目录
│ └── index.html // 外部访问的模板
├── statics // 静态资源目录
├── src
│ ├── core // 核心代码，包含基本服务和基础代码
│ ├── domain // 业务层代码，包含每个业务的单独 Clean 架构内容
│ │ └── todo // *某一具体的业务
│ ├── features // 存放公共组件、hooks、helpers等
│ ├── public // 其他公共资源，如 const等
│ ├── pages // 公共页面
│ ├── types // 公共类型定义目录
│ └── shared // 共享目录，可以抽离到其他项目用或独立形成为npm包的内容
├── index.html // 页面模板
├── package.json
├── postcss.config.js // postcss 配置
├── tailwind.config.js // taiwind配置
├── README.md
├── tsconfig.json // ts配置
├── tsconfig.node.json // ts配置
└── vite.config.ts // vite 配置

对应的 todo 是某一个具体的业务，在该目录下包含了一个完整的 Clean Architecture，相应的目录和文件如下所示：

├── model
│ ├── todo.entity.ts // 数据实体，简单的数据模型，用来表示核心的业务逻辑
│ └── todo.model.ts // 核心业务模型
├── repository
│ ├── todo.mapper.ts // 映射层，用于核心实体层映射，或映射到核心实体层。
│ └── todo.repository.ts // Repository，用于读取和存储数据。

Features 公共的业务组件目录

├── Helpers // 业务公共组件
├── Xcomponent
│ ├── Xcomponent.tsx // main view (组件视图，只写视图及视图相关逻辑，任何计算、转换数据在repository或者store中进行)
│ ├── Xcomponent.module.less // css style (样式)
│ ├── Xcomponent.d.ts // component type props definition (ts类型)
│ ├── Xcomponent.util.ts (optional) // complex component process (复杂组件逻辑处理)
│ ├── Xcomponent.config.ts (optional) // constant config （常量配置）
│ ├── Xcomponent.stories.tsx (optional) // storybook file for ui test （ui 组件化测试构建）
│ ├── Xcomponent.test.tsx (optional) // jest unit test （单元测试）
│ └── Xcomponent.store.ts (optional) // manage component store (组件自身状态层，可选)

操作步骤

1. 安装依赖（推荐用 yarn）

yarn insatll | npm i

2. 准备工作

vscode 安装插件

eslint、prettier

参考文献

https://juejin.cn/post/7047682306294677512 https://juejin.cn/post/7053730154710827045 https://github.com/conventional-changelog/commitlint/#what-is-commitlint https://juejin.cn/post/7123612981895626760

参考

语义化版本

参考文献