sergey

Вы ж сами все написали.
main.js - начальная точка. Здесь создается экземляр Vue и регистрируется корневой компонент App.vue. В main.js вы можете добавлять глобальные компоненты Vue.component({}), которые нужно объявить до основного экземпляра Vue. Глобальные компоненты пригодны для быстрых проверок, но в основном оперируют дочерними.
Так же, в main.js импортируются и подключаются плагины, которые тоже нужно установить в конструктор Vue до создания экземляра.

В App.vue у вас корневой компонент (разметка и код). Импортируются компоненты в файлах своих родителей (там же, где вы их указываете в блоке components).

И не надо никаких разных туториалов и уроков, официальной документации вполне достаточно.

Создадим объект, который будет содержать компоненты цвета:

colorComponents: {
  r: 0,
  g: 0,
  b: 0,
},

На основе этого объекта создадим элементы управления значениями компонентов цвета:

<div v-for="(v, k) in colorComponents">
  {{ k }}
  <input v-model="colorComponents[k]" type="range" min="0" max="255">
  {{ v }}
</div>

И стилизуем какой-нибудь элемент, вычисляя итоговый цвет:

<div :style="style">

computed: {
  style() {
    return {
      'background-color': `rgb(${Object.values(this.colorComponents).join(',')})`,
    };
  },
},

jsfiddle.net/o1xe8gmk/1

Актуален и еще долго будет.

blend-mode

element.classList.toggle()
https://developer.mozilla.org/en-US/docs/Web/API/E...

Вот вам даже пример:
Ссылка

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

const container = document.querySelector(".container");

container.onclick = function(){
	container.classList.toggle("container_color_red");
}

Паттерн "Состояние"

Красный:
- Ожидание: 20с
- Переход: Желтый

Желтый:
- Ожидание: 3с
- Переход: если был Красный, переходим на Зеленый, иначе на Красный

Зеленый:
- Ожидание: 30с
- Переход: Желтый

UPDATE:
Пример с использованием четырех состояний: https://codepen.io/Ni55aN/pen/ELGMOy

Разобрался.

При создании дочернего модуля, PHPStorm адекватно все подхватил

git submodule add git@github.com:ninazu/framework.git ./vendor/ninazu/framework
git commit -m "#addSubModule"
git push

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

cd ./vendor/ninazu/framework
git submodule update --init --recursive
git submodule update --recursive --remote

Дальше переходим к настройкам PHP Storm

Указать путь к подмодулю

File -> Settings -> Version Control -> Add -> Directory

Пофиксить локальную ветку

VCS -> Git -> Branches -> Repositories -> framework -> LocalBranches -> Checkout

Ну и обновить проект

VCS -> UpdateProject

$colors: (
        item1: green,
        item2: orange,
        item3: red,
        item4: blue,
        item5: lime,
);

.test {
  @each $key, $color in $colors {
    $index: index($colors, ($key $color));
    &-#{$index}-#{$key} {
        color: $color;
    }
  }
}

myForm.addEventListener('keypress', function(evt){
  if (evt.which == 32 || evt.keyCode == 32) {
    evt.preventDefault()
    myForm.submit()
  }
})