项目结构

QMUI Web 对项目文件结构（UI 层相关文件）有一定的依赖，不同的项目中如果能有相似的文件结构，也能便于开发。推荐的文件结构如下：

项目根目录
├─public          // 静态资源目录，由 Gulp 生成
│  ├─js           // 静态资源 js 文件
│  ├─style        // 静态资源 UI 文件
│  │  ├─css       // 静态资源 css 文件
│  │  └─images    // 静态资源 images 文件
│  └─template     // 最终的模板目录，区别于静态模板基于原生 HTML，最终模板通常是用功能完备的模板引擎驱动
├─UI_dev          // 实际进行开发的样式目录
│  ├─project      // 项目相关 Sass 与 images 文件，由 Gulp 生成，请参考“创建新项目”
│  │  ├─images    // 项目相关图片文件
│  │  ├─logic     // 项目相关逻辑样式
│  │  └─widget    // 项目相关公共组件样式
│  └─qmui_web     // QMUI Web 主源码应放置在这一层目录
├─UI_html         // 静态模板目录
└─UI_html_result  // 静态模板经 Gulp 处理后的版本，用于前端拼接最终的模板

这些目录 QMUI 会提供工具帮助完成创建，开发者并不需要手工创建这些目录。

另外这些目录结构只是层次上要求如此，即不建议修改目录的层级，但目录名如果与其他模块或组件冲突，可以自行修改目录名，并同步修改 qmui.config.js 的相关设置（qmui.qmui.config.js 需要复制到 UI_dev 中修改，如果直接修改 QMUI 源码中的配置文件，会影响框架的独立性，详细请参考“使用配置文件”）

图片文件管理

为了解决 CSS Sprite 造成的重复劳动工作以及管理图片，QMUI 提供了一套图片文件管理的方案。图片文件统一放置在一个目录中（project/images），其中，需要做雪碧图的图片应该在 images 下建立子目录统一放置，QMUI 会根据相应的规则合成雪碧图，关于这一点的详细情况，请参考这里。而不需要做成雪碧图的独立图片，应该放置在 images/independent（由 qmui.config.js 中的 independentImagesDirectory 选项控制）目录中，该目录中也可以再建立子目录。另外，无论是雪碧图还是独立图片，QMUI 都会统一管理这些图片，输出到静态资源目录（public/style/images），并自动进行图片压缩。