Mycarzdisignsystem NPM

Инструкция разработчика

Версии ПО

node: === 11.10.1 npm: === 6.7.0 yarn: latest

Как запустить проект

клонируем репозиторий себе на лоакльную машину

git@gitlab.agimagroup.ru:mycars.kz/frontend.git

устанавливаем зависимости

npm i / yarn

старт локального сервера разработки

npm run dev / yarn dev

Как писать компоненты

У нас есть три типа компонентов

Полностью переиспользуемые компоненты. Могут использоваться где угодно. Принимают пропсы.
Переиспользуемые компоненты, которые используются лишь на одной странице, или в одном разделе.
Уникальные компоненты, которые используются один раз. Раздают пропсы.

Правила именования

Папка - /components/shared/. Префикс Base. Пример: /components/shared/BaseButton.
Папка - /components/pages/[page]. Префикс: название страницы или раздела. Пример: /components/pages/profile/ExampleComponent.
Папка - /components/modules/. Префикс The. Пример: /components/modules/TheHeader.

Правила использовани

В SFC:

<template>
    <some-app-component>
</template>

<script>
import SomeAppComponent from '~/components/SomeAppComponent';

export default {
    components: {
        SomeAppComponent
    }
}
</script>

Пропсы

Мы не пишем required: false. Пропс может быть либо required, либо у него должно быть дефолтное состояние. Пропсы типа Boolean не имеют required и default

Как писать тесты

тесты будем внедрять после релиза mvp

Работа с API

апи на проекте модульное, поэтому у нас нет baseURL.

описываем vuex: ищем папку /store в ней создаем модель (сущность) example /store/auth далее создаем определенную структуру каталога, который состоит из следующего:

/store/auth/actions.js - здесь дергаем запросы к апи и импортируя тип мутации(если требуется) используем для commit в стор

/store/auth/constants.js - (опционально, нужно для переопределения params и тд)

/store/auth/getters.js - используем гетеры для получения каких либо операций с ответом от API (опционально) example: Получение отсортированного списка (какого либо) filter()

/store/auth/mutations-types.js. - здесь описываем типы (constants) мутаций example: export const SET_TOKEN = 'TOKEN';

/store/auth/mutations.js - тут описываем операции с мутациями (ключи, значения) передаем value в state

/store/auth/state.js - здесь хранится модель данных описываемой сущности example: export default () => ({ token: '', });

для импорта vuex в компонент используем import { mapState, mapActions, mapGetters } from 'vuex'; все импорты опциональны, импортируем только то, что требуется

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

...mapState({ token: (state) => state.auth.token, })

...mapActions({ setToken: 'auth/setToken', }) здесь setToken() можно дергать с параметрами и без в зависимости от ситуации (payload)

Что делать перед созданием мёрж реквеста

npm run / yarn prettier
npm run / yarn lint --fix

Исправляем все проблемы eslint, скоро поднимут CI и пайплайны не пройдут.

Общие рекомендации

Vue компоненты должны соответствовать Vue Style Guide. Vue Style Guide

Под каждую задачу нужно стараемся использовать оптимальные паттерны. Паттерны проектирования

Документация

Пример документации метода (функции)

1) Описание метода
2) Описываем '@param' параметры функции
3) Описываем '@returns' если функция что-то возвращает

/**
  * Описание метода (сортирует массив)
  * @param {Array} arr - Массив
  * @return {Array} arr - Возвращает отсортированный массив
  */
function example (arr) {
    return arr.sort()
}

`@const` - {Тип данных} - Название константы - описание

/**
  *  @const {Number} SEARCH_TIME_IN - Каждые 500мс обновляется данные с инпута
  */
const SEARCH_TIME_IN = 500;

`@module` - название модуля

1) Описываем название модуля
2) Указываем директорию в которой находится данный файл
    Начальная директория src
    Если директория components то пишем Component,  modules - Module, и по аналогии

/**
  * Модуль Авторизация       - (Название модуля, можно краткое его описание)
  * @module Module/Auth/App  - (Путь к файлу)
  */

`@param` - {Тип данных} - название параметра - краткое описание

/**
  * @param {String} name - Имя
  * @param {Number} [size = 11] size - размер - (Дефолтное значение 11)
  *                 [в квадратных скобках указывается не обязательный параметр]
  * @param {Object} obj - Объект (описываем все свойства внутри объекта)
  * @param {String} obj.name - имя объект
  * @param {Object} obj.options - опции объекта
  * @param {String} obj.options.color - опция объекта цвет
  * @param {Number} obj.options.price - опция объекта цена
  */
function example (name, size = 11, obj) {}

`@returns` - документирует значение, которое возвращает функция.

/**
  * @returns {Array} arr - Возвращает измененный массив
  */

`@vue-computed` - {Тип данных} - название - (краткое описание)

/**
  * @vue-computed {String} reverseText - Переворачивает текст
  */
reverseText(message) {
    return message.split('').reverse().join('')
}

`@vue-date` - {Тип данных} - название - (краткое описание)

/**
  * @vue-date {String} name - имя
  * @vue-date {Object} - order - объект заказа
  * @vue-date {String} - order.name - название заказа
  */
data () {
    return {
        name: 'какое-то имя',
        order: {
            name: 'название заказа'
        }
    }
}

`@vue-event` - {Тип данных} - название - (краткое описание)

/**
  * @vue-event {Number} pushCount - Емитит value
  */
this.$emit('pushCount', value);

`@vue-prop` - {Тип данных} - название - (краткое описание)

/**
  * @vue-prop {String} name     - имя
  * @vue-prop {Number} [age=1]  - age [не обязательный параметр]
  */
props: {
    name: {type: String},
    age: {type: Number, default: 1}
}