584.md

# Frontend Development Guidelines

> 原文：[https://docs.gitlab.com/ee/development/fe_guide/](https://docs.gitlab.com/ee/development/fe_guide/)

*   [Overview](#overview)
    *   [Browser Support](#browser-support)
*   [Initiatives](#initiatives)
*   [Principles](#principles)
*   [Development Process](#development-process)
*   [Architecture](#architecture)
*   [Testing](#testing)
*   [Pajamas Design System](#pajamas-design-system)
*   [Design Patterns](#design-patterns)
*   [Vue.js Best Practices](#vuejs-best-practices)
*   [Vuex](#vuex)
*   [Axios](#axios)
*   [GraphQL](#graphql)
*   [Icons and Illustrations](#icons-and-illustrations)
*   [Dependencies](#dependencies)
*   [Frontend FAQ](#frontend-faq)
*   [Style Guides](#style-guides)
*   [Tooling](#tooling)
*   [Performance](#performance)
*   [Security](#security)
*   [Accessibility](#accessibility)
*   [Internationalization (i18n) and Translations](#internationalization-i18n-and-translations)

# Frontend Development Guidelines[](#frontend-development-guidelines "Permalink")

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

## Overview[](#overview "Permalink")

GitLab 使用[Haml](http://haml.info/)在[Ruby on Rails 的](https://rubyonrails.org)基础上构建，并且还基于[Vue.js](https://vuejs.org)基于 JavaScript 的 Frontend. 注意[使用 Hamlit 所](https://github.com/k0kubun/hamlit/blob/master/REFERENCE.md#limitations)带来[的限制](https://github.com/k0kubun/hamlit/blob/master/REFERENCE.md#limitations) . 我们还将[SCSS](https://sass-lang.com)和普通 JavaScript 与通过[Babel](https://babeljs.io/)支持的现代 ECMAScript 标准一起使用，并通过[webpack](https://webpack.js.org/)支持 ES 模块.

使用我们的前端资产需要使用 Node（v10.13.0 或更高版本）和 Yarn（v1.10.0 或更高版本）. 您可以在我们的[安装指南中](../../install/installation.html#4-node)找到有关如何安装它们的信息.

### Browser Support[](#browser-support "Permalink")

对于我们当前支持的浏览器，请参阅我们的[要求](../../install/requirements.html#supported-web-browsers) .

使用[BrowserStack](https://www.browserstack.com/)来测试我们支持的浏览器. 使用保存在 GitLab [共享 1Password 帐户](https://about.gitlab.com/handbook/security/#1password-guide)的**Engineering**库中的凭据登录到 BrowserStack.

## Initiatives[](#initiatives "Permalink")

当前的高级前端目标列在" [前端史诗"中](https://gitlab.com/groups/gitlab-org/-/epics?label_name[]=frontend) .

## Principles[](#principles "Permalink")

对 GitLab 做出贡献[的高级指南](principles.html) .

## Development Process[](#development-process "Permalink")

我们如何[计划和执行](development_process.html)前端工作.

## Architecture[](#architecture "Permalink")

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

## Testing[](#testing "Permalink")

我们如何编写[前端测试](../testing_guide/frontend_testing.html) ，运行 GitLab 测试套件以及调试与测试相关的问题.

## Pajamas Design System[](#pajamas-design-system "Permalink")

在我们的[睡衣设计系统中](https://design.gitlab.com/)可以找到具有技术和使用指南的可重复使用组件.

## Design Patterns[](#design-patterns "Permalink")

GitLab 代码库中的常见 JavaScript [设计模式](design_patterns.html) .

## Vue.js Best Practices[](#vuejs-best-practices "Permalink")

明确具体的[设计模式和实践](vue.html) .

## Vuex[](#vuex "Permalink")

[Vuex](vuex.html)特定的设计模式和实践.

## Axios[](#axios "Permalink")

[Axios](axios.html)特定的实践和陷阱.

## GraphQL[](#graphql "Permalink")

如何使用[GraphQL](graphql.html) .

## Icons and Illustrations[](#icons-and-illustrations "Permalink")

我们如何将 SVG 用于我们的[图标和插图](icons.html) .

## Dependencies[](#dependencies "Permalink")

有关前端[依赖关系](dependencies.html)以及我们如何管理它们的常规信息.

## Frontend FAQ[](#frontend-faq "Permalink")

阅读[前端的常见问题](frontend_faq.html) ，以获取有用的常见小信息.

## Style Guides[](#style-guides "Permalink")

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

*   [JavaScript](style/javascript.html) . 我们的指南基于出色的[Airbnb](https://github.com/airbnb/javascript)样式指南，并做了一些小改动.
*   [SCSS](style/scss.html) ：我们的 SCSS 约定，通过[`scss-lint`](https://github.com/sds/scss-lint) .
*   [HTML](style/html.html) . 与其余代码库一致的编写 HTML 代码的准则.
*   [Vue](style/vue.html) . 有关 Vue 代码的准则和约定，请参见此处.

## [Tooling](tooling.html)[](#tooling "Permalink")

我们的代码会自动使用[Prettier](https://prettier.io)格式化，以遵循我们的准则. 阅读我们的[工具指南](tooling.html)以获取更多详细信息.

## [Performance](performance.html)[](#performance "Permalink")

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

## [Security](security.html)[](#security "Permalink")

前端安全实践.

## [Accessibility](accessibility.html)[](#accessibility "Permalink")

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

## [Internationalization (i18n) and Translations](../i18n/externalization.html)[](#internationalization-i18n-and-translations "Permalink")

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