目录结构
icejs 的默认应用目录架构提供了良好的代码分层结构,适用于开发或大或小的应用,约定的目录结构如下:
├── .ice/ // 运行时生成的临时目录
├── build/ // 构建产物目录
├── mock/ // 本地模拟数据
│ ├── index.js
├── public/ // 静态资源
│ ├── index.html // 应用入口 HTML
│ └── favicon.png // Favicon
├── src/ // 源码
│ ├── components/ // 自定义业务组件
│ ├── layouts/ // 布局组件
│ ├── pages/ // 路由页面组件
│ ├── models/ // 应用级数据状态
│ ├── global.scss // 全局样式
│ ├── config.ts // 运行时配置
│ ├── routes.ts // 路由配置
│ └── app.tsx // 应用入口
├── build.json // 工程配置
├── package.json
└── tsconfig.json
.ice/
运行 icejs 项目时默认生成的临时目录,该目录不需要进行 git 提交。
build/
运行 npm run build
后的构建产物目录。
mock/
本地模拟数据的目录。详见
public/
静态资源目录,默认包含 index.html
和 favicon.png
。
src/
源码目录
components/
项目通用的组件目录,推荐的目录形式如下:
Guide/
├── index.tsx
├── index.module.scss
└── **tests** # 就近测试用例
layouts/
项目的布局文件目录,布局通常包含导航配置,布局组件,样式三部分,推荐的目录形式如下:
BasicLayout/
├── menuConfig.ts # 布局对应的菜单配置
├── index.tsx
└── index.module.scss
models/
项目的全局数据模型目录,通常包含多个 model 文件,推荐的目录形式如下。详见
models/
├── foo.ts
└── bar.ts
pages/
项目的页面文件目录,页面通常包含数据模型,页面组件、样式三部分,推荐的目录形式如下。
Home/ # Home 页面
├── model.ts # 页面级数据状态
├── index.tsx # 页面入口
└── index.module.scss # 页面样式文件
app.tsx
项目的入口文件,用于对应用进行全局配置,包括路由、运行环境、请求、日志等。详见
config.ts
项目的环境配置,用于根据不同环境进行区分配置。详见
global.scss
全局的样式配置,框架默认会引入该文件。详见
routes.ts
应用的路由配置文件。详见
build.json
应用的工程配置文件。详见
package.json
应用所需要的各种模块,以及配置信息(比如名称、版本、许可证等元数据)。
tsconfig.json
TypeScript 编译所需的配置文件。