RFC6 春松客服前端项目结构初始化
春松客服的设计理念是一个依托于开源精神的客服操作系统,我们承诺永远开源,与开发者一同打造完美的客服系统生态。
因此前端项目组织结构,遵循三个原则。
三个原则
简单直观
- 业务落地是核心,在开发维护阶段不过度添加概念,尽可能简单直观
- 没有采用更为复杂的基于 monorepo 维护工具,仅依托于 pnpm 强大的包管理能力,更快的速度,节省磁盘空间。
- Vue 3.0 是一个渐进式构建用户界面的框架,相比于 React 的 All in JS 更为容易上手,具有优异的性能表现,除此之外生态丰富,社区活跃
拥抱开源社区
- 采用开源社区成熟生态的资源和方案,既希望于有更多的人加入,同样也能更好的回馈
面向现代的浏览器
- 2022年6月15日,Internet Explorer 11 停止服务
monorepo workspace 说明
WORKSPACE | 目录 | 说明 |
---|---|---|
@cskefu/web | app/web | 前端业务相关主题项目(基于 vue 3.0) |
@cskefu/cli | packages/@cskefu/cli | cli 工具 |
@cskefu/core | packages/@cskefu/core | 插件及核心系统引擎 |
@cskefu/tooling | packages/shared/tooling | 共享项目基础配置,例如:tsconfig, eslint相关 |
@cskefu/includes | packages/shared/includes | 保留命名,供可能依赖需托管的 submodule |
@cskefu/utils | packages/shared/utils | 共享公用工具包 |
@cskefu/ui | packages/ui | 基础组件及业务组件(基于 element-plus) |
运行方式
pnpm install
pnpm --filter {workspace} run {script}
# example
pnpm --filter @cskefu/web dev
前端项目结构划分
├── app
| ├── sdkjs // sdk on javascript
| | ├── src
| | ├── package.json
| | └── README.md
| ├── web // web frontend
| | ├── src
| | ├── package.json
| | └── README.md
├── packages
| ├── @cskefu // @cskefu library
| | ├── cli // cli tool
| | | ├── package.json
| | | └── README.md
| | ├── core // core library
| | | ├── package.json
| | | └── README.md
| ├── shared // shared library
| | ├── tooling // project config
| | | ├── package.json
| | | └── README.md
| | ├── utils // util
| | | ├── package.json
| | | └── README.md
| | └── README.md
| └── ui // design component
| ├── package.json
| └── README.md
└── README.md