Office UI Fabric Core 使用指南

Office UI Fabric Core 使用指南

office-ui-fabric-core The front-end CSS framework for building experiences for Office and Microsoft 365. 项目地址: https://gitcode.com/gh_mirrors/of/office-ui-fabric-core

Office UI Fabric Core 是一个前端CSS框架，专为构建符合Office设计语言的Office和Microsoft 365体验而设计。本指南将带你了解其基本结构、启动文件以及关键配置文件，帮助你快速上手。

1. 目录结构及介绍

Office UI Fabric Core 的仓库具有以下主要目录结构：

• ghdocs：存放了文档相关的资料。
• gulp：Gulp任务管理相关脚本，用于自动化构建过程。
• src：源代码的核心所在，包含了CSS、JavaScript和其他资源文件：
  • css 和 sass-lint.yml: 核心CSS样式和SASS Lint的配置文件。
  • json 文件（如csscomb.json, gitignore, npmignore等）提供了工具配置和忽略规则。
  • .travis.yml: Travis CI的配置文件，用于持续集成。
• LICENSE: 许可证文件，说明了软件使用的MIT许可协议。
• README.md: 项目的主要读我文件，介绍了项目概况和快速上手信息。
• package-lock.json, package.json: 包含项目依赖和元数据，用于npm包管理和版本控制。
• 其他辅助文件如.code-of-conduct.md, .security-policy.md等，提供行为准则和安全策略指导。

2. 启动文件介绍

在Fabric Core中，并没有传统意义上的“启动文件”，因为它主要是作为一个静态资源库来使用的。然而，如果你想要构建或测试自定义版本，重点在于Gulp脚本。位于gulpfile.js中的任务是构建流程的关键，它负责编译SCSS到CSS，执行 lint 检查，以及其他自动化任务。开发者通常通过运行Gulp任务来准备生产环境的CSS文件或其他需要的资产。

要手动“启动”这个过程，你可能需要执行类似于gulp serve或指定的构建命令，但这取决于本地开发环境的设置，具体指令应参照仓库内的最新说明。

3. 项目的配置文件介绍

Gulp 配置 - gulpfile.js

gulpfile.js是Gulp任务的定义文件，它包含了一系列自动化任务，比如编译、测试和打包等。通过修改此文件，你可以定制化构建流程，例如添加额外的lint步骤或者改变输出路径等。

包配置 - package.json

package.json不仅记录了项目的元信息，还定义了项目依赖及其脚本命令。这是Node.js项目的基础，其中的scripts部分允许定义自定义的npm命令，例如start、build等，这对于自动化构建或运行测试至关重要。

版本控制忽略 - .gitignore

.gitignore文件列出了不应被Git版本控制系统追踪的文件和目录模式，确保了像编译后的文件或个人配置不会被误提交。

CSS风格规则 - csscomb.json

csscomb.json用于配置CSS代码风格，确保团队间代码风格的一致性，通过工具自动对齐CSS属性顺序等。

通过深入了解这些核心组件，开发者可以更有效地利用Office UI Fabric Core进行高效的前端开发。记得参考官方文档获取最新的配置和使用说明。

office-ui-fabric-core The front-end CSS framework for building experiences for Office and Microsoft 365. 项目地址: https://gitcode.com/gh_mirrors/of/office-ui-fabric-core