源码目录

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 样式