rahmet-ui

Рахмет UI Компоненты

Контент

• Установка
• Использование
• Запуск
• Требование

Установка

npm

npm install rahmet-ui

yarn

yarn add rahmet-ui

Использование

Пример использования компонента RahmetButton:

<template>
    <rahmet-button>Test Rahmet Button</rahmet-button>
</template>

import {RahmetButton} from "rahmet-ui"

export default {
    ...
    components: {
        RahmetButton
    }
}

Запуск

Локально

yarn serve

Инициализация компонентов осуществляется в папке dev/serve.vue. Файл serve.js аналог main.js в обычном Vue проекте.

Production

yarn build

Unit тесты

yarn test:unit

E2E тесты

yarn test:e2e

ESLINT

yarn lint

Требование

Порядок CSS-свойств:

.element {
  /* Позиционирование */
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  /* Блочная модель */
  display: flex;
  align-items: center;
  margin: 10px;
  padding: 10px 20px;
  border: 1px solid red;
  width: 200px;
  height: 100px;
  box-sizing: border-box;

  /* Типографика */
  font-family: Arial;
  font-size: 25px;
  font-style: italic;
  text-decoration: none;
  color: red;

  /* Оформление */
  background: red;
  opacity: 1;

  /* Анимации */
  transform: translateX(5px);
  animation: shake 0.3s infinite;
}

Требования к JavaScript:

1. Смысловые блоки кода отделяются друг от друга не более чем двумя пустыми строками
2. Запрещено использовать case без break или return в блоках switch
3. В коде не используется оставленных выводов в консоль
4. В коде нет объявленных, но неиспользуемых переменных

Порядок Vue-свойств:

export default {
  // Инициализация компонента
  name,
  components,
  mixins,

  // Входные параметры и пользовательские события
  props,
  emits,

  // Работа с данными
  data,
  computed,
  watch,

  // Жизненные циклы
  beforeCreate,
  created,
  beforeMount,
  mounted,
  beforeUpdate,
  updated,
  beforeUnmount,
  unmounted,
  errorCaptured,
  renderTracked,
  renderTriggered,
  activated,
  deactivated,

  // Методы
  methods
};