QMUI Web 项目教程

1. 项目的目录结构及介绍

QMUI Web 项目的目录结构如下：

项目根目录
├─public // 静态资源目录，由 gulp 生成
│ ├─js // 静态资源 js 文件
│ └─style // 静态资源 UI 文件
│   ├─css // 静态资源 css 文件
│   └─images // 静态资源 images 文件
├─UI_dev // 实际进行开发的样式目录
│ ├─project // 项目相关 SASS 与 images 文件，由 gulp 生成
│ │ ├─images // 项目相关图片文件
│ │ ├─logic // 项目相关逻辑样式
│ │ └─widget // 项目相关公共组件样式
│ └─qmui_web // QMUI Web 主源码应放置在这一层目录
├─UI_html // 静态模板目录
└─UI_html_result // 静态模板 gulp 处理后的版本，用于前端拼接最终的模板

目录结构介绍

• public: 存放由 gulp 生成的静态资源文件，包括 JavaScript、CSS 和图片文件。
• UI_dev: 实际进行开发的样式目录，包含项目相关的 SASS 文件和图片文件。
  • project: 项目相关的 SASS 与 images 文件，由 gulp 生成。
    • images: 项目相关的图片文件。
    • logic: 项目相关的逻辑样式。
    • widget: 项目相关的公共组件样式。
  • qmui_web: QMUI Web 主源码应放置在这一层目录。
• UI_html: 静态模板目录，存放前端模板文件。
• UI_html_result: 静态模板 gulp 处理后的版本，用于前端拼接最终的模板。

2. 项目的启动文件介绍

QMUI Web 项目的启动文件主要包括 gulpfile.js 和 package.json。

gulpfile.js

gulpfile.js 是 QMUI Web 项目的主要构建文件，负责定义项目的构建任务。通过运行 gulp 命令，可以执行这些任务，如编译 SASS 文件、合并和压缩静态资源等。

package.json

package.json 是 Node.js 项目的配置文件，包含了项目的元数据和依赖包信息。通过运行 npm install 命令，可以安装项目所需的所有依赖包。

3. 项目的配置文件介绍

QMUI Web 项目的配置文件主要包括以下几个：

.editorconfig

.editorconfig 文件用于定义代码编辑器的配置，确保团队成员在不同的编辑器中使用一致的代码风格。

.eslintrc.js

.eslintrc.js 文件用于配置 ESLint，帮助开发者检查和修复 JavaScript 代码中的问题。

.gitignore

.gitignore 文件用于指定 Git 版本控制系统忽略的文件和目录，避免将不必要的文件提交到代码仓库。

.travis.yml

.travis.yml 文件用于配置 Travis CI 持续集成服务，自动化项目的构建和测试过程。

LICENSE

LICENSE 文件包含了项目的开源许可证信息，规定了项目的使用和分发条款。

README.md

README.md 文件是项目的说明文档，包含了项目的介绍、安装和使用说明等内容。

appveyor.yml

appveyor.yml 文件用于配置 AppVeyor 持续集成服务，自动化项目的构建和测试过程。

qmui.config.js

qmui.config.js 文件是 QMUI Web 项目的配置文件，包含了项目的各种配置选项，如 SASS 配置、静态资源路径等。

qmui.merge.rule.js

qmui.merge.rule.js 文件用于定义 QMUI Web 项目的合并规则，帮助开发者管理和合并项目中的各种资源文件。

stylelint.config.js

stylelint.config.js 文件用于配置 Stylelint，帮助开发者检查和修复 CSS/SASS 代码中的问题。

yarn.lock

yarn.lock 文件是 Yarn 包管理器的锁定文件，确保项目依赖包的版本一致性。

通过以上配置文件，QMUI Web 项目可以实现高效的开发和维护，确保项目的高可维护性和稳健性。