shmatuan

Минутка обучения отладке:
0) Читаем текст ошибки. Видим что она из Post.vue.
1) Смотрим трэйс ошибки.
2) Видим что:

created -> fetchComponents -> cannot read id of undefined

3) Смотрим метод fetchComponents:
4) id используется только в одном месте
5) this.posts.id
6) Делаем вывод: this.posts во время выполнения метода = undefined
7) Смотрим что такое this.posts
8) Видим что такого не существует
9) А существует this.post (определено в props компонента)
10) Делаем вывод: опечатались или стали жертвой собственного копипаста и нужно в этом методе удалить лишнюю s.

В общем сам решил проблему! Как говориться: "Спасение утопающих - дело рук самих утопающих!"

Суть того что я делаю, я просто подменяю host:port в адресе заголовка в ответе от локального сервера (proxyRes.headers.location) на host:port webpack dev server'a и CORS идет нах...(лесом), так как не вдупляет, что его наеб... (обманули) ))) и подсунули другой адрес.

devServer: {
    contentBase: params.path.public, // Путь до корневой дериктории, где dev server будет запрашивать файлы, которые не компилируются webpack'om
    // Например: c://web-site-path/public
    publicPath: params.path.publicPath, // Перфикс пути, по которому будут лежать файлы у вебпак дев сервера 
    // Например: '/public/assets/' - файлы будут доступны по адресу: http://anyships.site/public/assets/file_name.js
    host: 'anyships.site', // Host webpack dev server'a
    port: 3000, // Port webpack dev server'a
    hot: true, // Включить автоперезагрузку страницы при изменении файлов
    proxy: { // Собственно настройки прокси
      '**': { // С какого адреса webpack dev server'a будут проксироваться запросы на адрес локального сервера. 
        // В данном случае ** - значит все адреса проксировать, начиная с корня http://anyships.site:3000
        // Например: http://anyships.site:3000/user запрос на http://anyships.site/user (адрес из target ниже)
        target: `http://anyships.site`, // Целевой адрес локального сервера, куда будут проксироваться запросы с дев сервера 
        onProxyRes(proxyRes, req, res) {
          if (proxyRes.headers.location) { // Если есть заголовок со свойством location (Где храниться полный адрес запроса к локальному серверу)
            let location = proxyRes.headers.location; // Сохраняем адрес зоголовка location из ответа в переменную location
            console.log(`LOCATION: ${proxyRes.headers.location}`); // Выводит в консоль адрес до замены
            location = location.replace('anyships.site', 'anyships.site:3000'); // Заменяем адрес локального сервера на адрес webpack dev server'a
            proxyRes.headers.location = location; // Присваиваем в заголовок location подмененный адрес из переменной location
            console.log(`REPLACED: ${proxyRes.headers.location}`); // Выводит в консоль адрес после замены
          }
        }
      }
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

Надеюсь мой ответ поможет кому-то еще, кроме меня самого! )) Успехов всем!

Никак. Это пользовательский браузер, пользователь сам решает, как свою программу растягивать.

С помощью js вычисляете, что элемент попадает в видимую зону (легко гуглится) и добавляете класс с анимацией. По ссылке, что вы дали, описание анимации можно посмотреть в стилях элемента (скопировал сюда).

@keyframes bounceInUp {
	0% {
		opacity: 0;
		transform: translateY(2000px);
	}

	60% {
		opacity: 1;
		transform: translateY(-30px);
	}

	80% {
		transform: translateY(10px);
	}

	100% {
		transform: translateY(0);
	}
}

Если я изучу в достаточной мере JS ,то смогу потом изучить Node.Js и работать с серверной часть

Знание JS однозначно поможет начать работать с JS на сервере. Язык тот же, только другие API, потому что другая среда. Я бы порекомендовал не распылять силы на разные языки и освоить сначала что-то одно. Тем более, что работа отдельно по фронтенду, вообще без бэкенда (вам надо будет понимать, как они взаимодействуют, но совсем не обязательно уметь это реализовывать самим), достаточно распространена.

Отдельно отмечу, что бэкенд это не только PHP.

sass/less, bem, html, js

В вакансии указаны требования к фулстаку

1) Купить нормальный fullhd монитор, т.к. сейчас все сайты нужно на нем смотреть.
2) В хроме F12, слева кнопочка Toggle device toolbar, и вверху вводите нужную ширину экрана.

Все верно, работают через git. Как правило есть ветка development, ветка master и отдельные ветки для разработки фич. После разработки каждой фичи эта ветка через pull request сливается с development. Когда вы готовы к релизу development вливается в master. Возможные конфликты разрешаются при слиянии веток чаще всего автоматически, так как git довольно умная система, но иногда приходится вручную. Более подробно весь процесс описан в git flow

но разброс советом просто колоссальный

Тут будет еще колоссальнее.

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

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

если смотреть на hh по объявлениям.

Вакансии по чистой верстке не такие объемные по требованиям. Но часто требуют JS, сейчас без него никуда.

Сейчас задалась вопросом как писать и делать проекты, поспрашивала у знакомых

Прошлогодний ответ, но все еще актуальный Верстка с нуля: какие основные этапы работы?

Кто-то советуют делать адаптивные сетки самостоятельно сливая вместе флексы и гриды и писать на ванильном css без фреймворков, много советуют фреймворк smartgrid, пара используют bootstrap и плюют на все остальное считая это лишними усилиями.

При хороших знаниях css, в особенности flex и grid, вам не нужно будет использовать всякие фреймворки. Никогда не любил их использовать, всегда одинаково по времени разработка занимала как с css фреймворками, так и без. Но вы должны ориентироваться на себя. Попробовать стоит и так и так, но на начальных этапах советую делать упор на чисты css, чтобы лучше понимать, как это работает. Фреймворки лишь обертки.

И понять, кто прав и кому верить я не смогла

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

Но хочу сразу идти в правильную сторону зацепляя меньше граблей.

Грабли, как и ошибки, довольно полезная вещь в изучении. Помогает оценить, почему так ошибся, как сделать так, чтобы больше так не ошибаться.

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

Учите чистый css, html и js, по мере работы будете понимать, какие инструменты вам необходимы, чтобы облегчить/ускорить разработку. Закидаете себя сейчас инструментами - перегорите и бросите.

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