Frontend Development Guidelines

原文：https://docs.gitlab.com/ee/development/fe_guide/

Frontend Development Guidelines

本文档介绍了各种指南，以确保整个 GitLab 前端团队的一致性和质量.

Overview

GitLab 使用Haml在Ruby on Rails 的基础上构建，并且还基于Vue.js基于 JavaScript 的 Frontend. 注意使用 Hamlit 所带来的限制 . 我们还将SCSS和普通 JavaScript 与通过Babel支持的现代 ECMAScript 标准一起使用，并通过webpack支持 ES 模块.

使用我们的前端资产需要使用 Node（v10.13.0 或更高版本）和 Yarn（v1.10.0 或更高版本）. 您可以在我们的安装指南中找到有关如何安装它们的信息.

Browser Support

对于我们当前支持的浏览器，请参阅我们的要求 .

使用BrowserStack来测试我们支持的浏览器. 使用保存在 GitLab 共享 1Password 帐户的Engineering库中的凭据登录到 BrowserStack.

Initiatives

当前的高级前端目标列在” 前端史诗”中 .

Principles

对 GitLab 做出贡献的高级指南 .

Development Process

我们如何计划和执行前端工作.

Architecture

我们如何在 GitLab 的前端团队中做出基本的设计决策 ，或者对我们的前端开发准则进行更改.

Testing

我们如何编写前端测试 ，运行 GitLab 测试套件以及调试与测试相关的问题.

Pajamas Design System

在我们的睡衣设计系统中可以找到具有技术和使用指南的可重复使用组件.

Design Patterns

GitLab 代码库中的常见 JavaScript 设计模式 .

Vue.js Best Practices

明确具体的设计模式和实践 .

Vuex

Vuex特定的设计模式和实践.

Axios

Axios特定的实践和陷阱.

GraphQL

如何使用GraphQL .

Icons and Illustrations

我们如何将 SVG 用于我们的图标和插图 .

Dependencies

有关前端依赖关系以及我们如何管理它们的常规信息.

Frontend FAQ

阅读前端的常见问题 ，以获取有用的常见小信息.

Style Guides

请参阅相关的样式指南以获取我们的准则以及有关棉绒的信息：

  • JavaScript . 我们的指南基于出色的Airbnb样式指南，并做了一些小改动.
  • SCSS ：我们的 SCSS 约定，通过scss-lint .
  • HTML . 与其余代码库一致的编写 HTML 代码的准则.
  • Vue . 有关 Vue 代码的准则和约定，请参见此处.

Tooling

我们的代码会自动使用Prettier格式化，以遵循我们的准则. 阅读我们的工具指南以获取更多详细信息.

Performance

监视和最大化前端性能的最佳实践.

Security

前端安全实践.

Accessibility

我们的无障碍标准和资源.

Internationalization (i18n) and Translations

本文档介绍了前端国际化支持. 指南的外部化部分介绍了可用的帮助程序/方法.