组件化最佳实践
JUI核心是单文件组件的架构模式，以组件化分而治之的指导原则部署代码，可以将整个应用理解为一个大的组件，布局是其子组件，功能页面是布局组件的子组件，功能模块又是功能页面的子组件，依次类推，整个应用将有许多个独立的不同规模、不同功能的独立分治的模块/组件组成。
组件根据功能不同分为页面组件和功能组件。
页面组件
页面组件指配置了路由，配合路由实现界面的跳转，或者通过链接直接访问的模块，页面组件可以由若干子页面组件、或者相对独立功能的组件完成一个视图页面中的大功能。在JUI中，页面组件通常部署在pages目录中。
pages/页面组件
├── index.js
├── index.less #可以有 样式
├── assets #可以有 图片、字体等静态资产
├── components #可以有 相对独立功能的子组件
├── pages #可以有 若干 子页面组件
├── routes.js #可以有 子页面组件的路由配置
└── store.js #可以有 子页面组件间共享状态的store配置
功能组件
功能组件只负责一块相对独立、稳定的功能，没有路由配置，可能是纯静态的，也可能包含自己的 state，但不涉及多个组件间共享的数据流，仅受父组件（通常是一个页面组件）传递的参数控制。在JUI中，功能组件通常部署在components目录中。
components/功能组件
├── index.js
├── index.less #可以有 样式
├── assets #可以有 图片、字体等静态资产
└── components #可以有 相对独立功能的子组件
组件结构概览
index #页面组件
├── api
├── app.js
├── assets
├── components
├── index.html
├── index.js
├── index.less
├── layout
│ ├── exception
│ │ ├── components #功能组件
│ │ ├── index.js
│ │ ├── pages #页面组件
│ │ │ ├── 403.js
│ │ │ ├── 404.js
│ │ │ └── 500.js
│ │ └── routes.js
│ ├── login
│ │ ├── assets
│ │ ├── components #功能组件
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── pages #页面组件
│ │ │ ├── login
│ │ │ │ ├── index.js
│ │ │ │ └── index.less
│ │ │ ├── register
│ │ │ │ ├── index.js
│ │ │ │ └── index.less
│ │ │ └── register-result
│ │ │ ├── index.js
│ │ │ ├── index.less
│ │ │ ├── result.js
│ │ │ └── result.less
│ │ └── routes.js
│ └── main
│ ├── components
│ │ ├── footer
│ │ ├── header
│ │ ├── page-wrapper
│ │ └── sider-menu
│ ├── config.js
│ ├── index.js
│ ├── index.less
│ ├── menu.js
│ ├── pages #页面组件
│ │ ├── basic-form
│ │ │ ├── index.js
│ │ │ └── index.less
│ │ ├── basic-table
│ │ │ ├── components #功能组件
│ │ │ ├── index.js
│ │ │ └── service.js
│ │ ├── dashboard
│ │ │ └── index.js
│ │ ├── search-table
│ │ │ ├── components #功能组件
│ │ │ └── index.js
│ │ └── step-form
│ │ ├── components #功能组件
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── pages #页面组件
│ │ │ ├── step1.js
│ │ │ ├── step2.js
│ │ │ ├── step3.js
│ │ │ └── style.less
│ │ ├── routes.js
│ │ └── store.js
│ └── routes.js
├── routes.js
├── store.js
└── utils