➜ choral-music-player
├── README.md
├── babel.config.json
├── commitlint.config.js
├── docs // 开发文档
├── package.json
├── postcss.config.js
├── scripts // 构建脚本
├── src // 项目源码
├── test // 自动化测试源码
├── script // 自动化测试配置
└── tsconfig.json
项目源码目录如下, 初始化新项目后, src
内部可以按需去修改/重命名目录.
➜ src
├── api // 封装ajax请求
├── assets // 静态资源,存放图片、svg
├── components // 组件,分为 common 及业务组件
├── container // 页面 UI 容器, 目录结构和`src/template`一一对应
│ └── index.tsx
├── router // 路由配置
├── store // 状态管理逻辑相关
├── template // 页面模板, 支持多页面
│ ├── index.html
│ └── index.ts
├── types // 存放类型
│ └── global.d.ts
├── utils // 常量、工具函数等
└── view //页面,其中每个文件夹按照功能模块划分
├── page1
├── index.tsx
└── index.less
页面的加载流程为:
// index.html
template/index.html ➜ template/index.ts ➜ container/index.tsx -> 页面UI组件