Vue.js

Руководство по Vue.js.

Linting

По умолчанию мы используем eslint-vue-plugin с plugin:vue/recommended. Пожалуйста, ознакомься с этими правилами для получения дополнительной инфы

Модульная разработка

Всегда старайтесь, чтобы ваше приложение состояло из небольших модулей, каждый из которых умеет выполнять только одну задачу.

Модуль по определению это небольшая ограниченная часть приложения. Самодостаточный функционально. Организация Vue позволяет создавать подобные модули ориентируясь на визуальные компоненты.

Модули небольших размеров легче взять для использования - понять что они делают, дорабатывать или переиспользовать. И вам и всей вашей команде.

Старайтесь чтобы каждый Vue компонент соответствовал принципам FIRST👍

• решающий одну задачу;

• независимый;

• переиспользуемый;

• небольшой;

• простой в тестировании.

Именование компонентов

В целом, имя каждого компонента должно соответствовать следующим критериям:

• Понятное: в меру детальным, в меру абстрактным;

• Короткое: состоит из 2-3 слов;

• Произносимое: чтобы его можно было упомянуть в обсуждении.

Имя компонента используется людьми. Имя должно облегчать коммуникацию, а также обеспечивать ускоренное ознакомление с кодом.

<!-- неправильно -->
<ui-slider></ui-slider> <!-- все компоненты - так или иначе UI элементы, приставка не нужна -->
<slider></slider> <!--не соответствует спецификации HTML5, а также в 1 слово -->

<!-- правильно -->
<AppHeader /> <!-- крупный компонент, включающий много дочерних компонентов -->
<UserList /> <!-- компонент с бизнес-логикой -->
<RangeSlider /> <!-- компонент элемент интерфейса -->

Именование по типам компонентов

<!-- крупные части приложения начинаем с App* -->
<AppHeader />
<AppMain />
<AppFormRequest />
<AppFeed />

<!-- компоненты с бизнес-логикой именуем по назначению -->
<UserList />
<CardsGrid />
<RssFeed>
    <!-- итерируем компоненты постов -->
</RssFeed>
<FormBuilder />

<!-- компоненты элементы интерфейса, если универсальные (U - Universal) -->
<UButton></UButton>
<USelect />
<UTabs />
<UTable />
<UForm>
   <!-- элементы формы -->
</UForm>

Структура каталогов

В разработке

Структура компонента (+ composition API)

В разработке

Именование методов и свойств компонентов

В разработке

Не рекомендуется или не использовать

В разработке