Frontend Development Guidelines · Gitlab 中文文檔

# 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)介紹了可用的幫助程序/方法.