Сергей delphinpro

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

<app-icon-heart/>
<app-icon-like/>

Спрайты здесь вряд ли нужны. Код и так собирается в единый бандл.

Поиск там достаточно умный:

А зачем вы меняете атрибуты?
Нужно менять данные.

$('.add_item').data('id', 2);
$('.add_item').data('title', 'Справка в бассейн (взрослых)-1');

И, кстати, код можно сократить, используя объекты (в обоих случаях)

$('.add_item').data({
  id: 2,
  title: 'Справка в бассейн (взрослых)-1'
});

Вопрос не новый
https://yandex.ru/search/?text=Как%20адаптировать%...

Обычная хотелка при скрещивании php с vue =)
Я толкаю массив данных в глобальный объект

Где на странице:

<script type="text/javascript">
  window.__STATE__ = <?= json_encode($allData) ?>;
</script>

В vue компонентах

created () {
  if (window.__STATE__ && window.__STATE__.myData) {
    this.myData = window.__STATE__.myData;
  } else {
    axios.get( .... )
  }
}

При использовании Vuex все еще проще, единственная проверка при инициализации стора.

Можете не искать подвоха, его нет. Всё очень просто и прозаично — это их родной БЭМ в его чистейшей интерпретации. Они же используют полный стек БЭМа, а не только нотацию имен классов. Любой стиль определяется только классом. Каждый компонент лежит в отдельной папке, внутри js/css/img, стили разбиты еще на файлы — стили блока/элемента/модификатора в отдельных файлах. Всё это собирается чудо-машиной БЭМ.js.

function getData() {
  //...
  return new Promise((resolve, reject) => {
    xhr.onreadystatechange = function () {
        if (xhr.readyState != 4) reject(xhr.statusText);
        if (xhr.status != 200) {
          reject(xhr.statusText);
        } else {
          resolve(xhr.responseText);
        }
    };
    xhr.send();
  });
}

// use

getData()
  .then(function(response){
    console.log('Its OK', response);
  })
  .catch(function(errorText){
    console.log('Error:', errorText);
  });

А зачем вообще кейфреймы множить, одного не достаточно?

$base-delay: 100ms;
@for $i from 0 through 400 {
  .item#{$i} {
    animation-delay: $base-delay + $i;
    animation-name: myanimation
  }
}
@keyframes myanimation { .... }

Смотрим ссылки
https://caniuse.com/#feat=flexbox
https://caniuse.com/#feat=css-grid

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

Актуально то, что позволяет вам сделать техническое задание к проекту.

При создании экземпляра Vue пробегается по всем имеющимся свойствам на всю глубину и присобачивает к ним геттеры и сеттеры, которые запускают внутренние механизмы реакции на изменение свойтсв, делая их реактивными.
Когда вы просто добавляете новое свойство, никаких геттеров/сеттеров к нему автоматически не навешивается, и Vue не может отслеживать изменения.
Именно поэтому для добавления новых свойств необходимо использовать метод Vue.set(), который при создании через defineProperty проинициализирует все внутренние механизмы реактивности.

Внимательно посмотрите на первый скрин, в терминал, потом на второй скрин, туда же. Найдите отличие.

Отличие в том, что во втором случае в ошибке указан стек вызова scss-файлов, а в первом нет. Какой из этого следует вывод? Элементарно - вы компилите header.scss отдельно. В нем вы ничего не подключаете, это нормально, все подключено в style.scss, но сам файл по отдельности так не скомпилится.
1. Подключаемые части стилей принято именовать с начальным подчеркиванием
2. Файлы с начальным подчеркиванием должны быть исключены, не передаваться на вход галпа.

Во втором случае хз, ну наверное нет у вас такой переменной, создайте ее.

Почему бы вам это не узнать у автора шрифта? https://www.linotype.com/1448776/din-next-cyrillic...

отдельный спиннер на странице, вне главного контейнера (#app), по дефолту видимый. Примерно так

.spinner { display: none; }
body:not(.app-mounted) .spinner {
  display: block;
}

и обработка события

new Vue({
  …
  mounted(){
    this.$nextTick(()=>document.body.classList.add('app-mounted'));
  }
});

реальное (физические пиксели) 1280х720
вьюпорт (логические пиксели) 640х360

это ретина дисплей с повышенной плотностью пикселей (2х)

<template>
	<b-button
		variant="outline-warning"
		class="d-block text-white text-uppercase"
		:disabled="btnLoading"
	>
		<span v-text="buttonText"></span>
		<i class="fas fa-spinner fa-spin" v-if="btnLoading"></i>
	</b-button>
</template>
<script>
...
		data() {
			return {
                tabIndex: 0,
                firstServer: {},
                product: {},

                order: {
                    nickname: '',
                    productId: ''
                },

                btnLoading: false
            }
        },
		
		computed: {
			buttonText() {
				return this.btnLoading
					? 'Подождите'
					: `Купить за ${ this.product.original_price } руб.`;
			}
		}
...
</script>

Фон менял сам!

А вы, извините, разработчик, или так залезли?

Нотация цвета hex rgba поддерживается только в современных браузерах. Остальные, естественно, ничего не показывают.

/*box-shadow: 0 0 4px 2px #ffffffe6;*/
/*background: #ffffffe6;*/
box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.9);

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

Sum = (a1+a10) / 2 * 10

на scss:

$count: 10;
$baseWidth: 121px;

$sum: ($baseWidth + $baseWidth * $count) / 2 * $count;

итог: