当前位置:首页-文章-规范征求-正文

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
本文原创,作者:Kaifuny,其版权均为春松客服所有。
如需转载,请注明出处:https://www.cskefu.com/2023/01/09/rfc6-cskefu-frontend-init-of-web/