代码构成

上一个章节，我们已经成功构建了一个 YIS 应用。你可能已经注意到这个应用的目录结构了，接下来我们一起来看看它的代码构成。

├── src
│   ├── components
│   │   └── dialog
│   ├── pages
│   │   └── home
│   │       ├── index.js
│   │       ├── index.template
│   │       └── main.css
│   └── themes
│       └── variable.css
├── app.json
├── asserts.yaml
├── package.json
├── postcss.config.js
└── ykit.js

源码目录

src 目录是 YIS 引用的源码目录。我们来看看 src 的目录结构和内容。

├── src
│   ├── components
│   │   └── dialog
│   ├── pages
│   │   └── home
│   │       ├── index.js
│   │       ├── index.skel
│   │       └── main.css
│   └── themes
│       └── variable.css
├── ...

pages 目录

pages 目录是页面逻辑的源码目录。以默认构建的 YIS 应用为例，我们来看看 pages 目录里的内容。

1. home 目录：pages 目录中的每个子目录都对应一个页面，页面名称即为 home。
2. index.js：每个页面目录中，都必须有对应的 index.js，是该页面 js 文件的入口。这个入口会被自动识别，因此并不需要显式的进行配置。
3. index.skel：页面骨架屏的模板。
4. main.css：页面的样式文件，在 index.js 中引入即可。

对于比较复杂的业务场景，可能会有更加复杂的目录结构，以下面的结构为例：

├── pages
│   └── mall
│       ├── home
│       │   ├── index.js
│       │   ├── index.skel
│       │   └── main.css
│       ├── list
│       │   ├── index.js
│       │   ├── index.skel
│       │   └── main.css
│       └── detail
│           ├── index.js
│           ├── index.skel
│           └── main.css
├── ...

对于嵌套的目录，只有最里层的目录，才会被识别为页面目录。此时，页面的名称需要加上其层级。比如：./pages/mall/home 这个目录对应的页面的名称为 mall/home。

components 目录

除了页面的代码，通常我们也会有一些可复用的组件代码。components 目录就是用来放置公共组件的目录。

themes 目录

themes 目录用来存放一些全局的样式配置和比较复杂的样式配置的。我们把这些复杂的样式配置抽象成主题，以方便使用。更多关于 themes 目录的用法，可以参考 YIS 样式。