Sabah

Я считаю каждый работает на том, на чем привык работать и будет хвалить именно свой IDE или редактор кода. За свое время я работал со следующими IDE для написания JS кода и все они казались мне ничего:

• Adobe Dreamweaver
  
• Eclipse
  
• Komodo IDE
  
• Codelobster
  
• NetBeans IDE
  
• Visual Studio
  

Но веб не стоял на месте, появлялись новые стандарты js, npm, ESLint, grunt, gulp, webpack и прочее. И из этой шестерки более менее успевал за модой только Visual Studio. Успевал это конечно очень образно говоря. Про остальные я вообще молчу.
И когда я познакомился с WebStorm меня конечно сразу подкупила его функциональность, современность, следование тенденциям в веб-разработке. Так вот о чем я, VS Code конечно тоже хороший редактор, но главный его плюс это бесплатность. В плане функционала, современности и удобства пользования у WebStorm нет конкурентов. Но понять это можно только используя если не все, то хотя бы половину его возможностей. Многие его фичи открываются только любопытным людям.

P.S. Многие говорят что у VS Code есть плагины, но все почему-то забывают что у WS они тоже есть.

Я бы хотел прекратить платить каждый год за WebStorm и пользоваться бесплатным опенсорсным софтом, но...

Простой пример: есть export class MyClass {} в файле MyClass.js, переименовываем класс, WebStorm предлагает заодно переименовать файл и исправляет все импорты. И таких мелочей, которые снимают с человека дурацкую ручную работу -- полно. В VS Code такого нет.

const splitArr = (arr, chunks) =>
  Array.from(
    { length: chunks },
    (_, c) => arr.filter((n, i) => i % chunks === c)
  );

или

const splitArr = (arr, chunks) =>
  arr.reduce((acc, n, i) => (
    (acc[i % chunks] = acc[i % chunks] || []).push(n),
    acc
  ), []);

Если ларавел используется только как бэкэнд - использовать именно его vue не обязательно, можно положить его в отдельную папку и не использовать его фронт возможности вообще. Если делается MPA приложение с первичным рендером на сервере с помощью php и использованием vue только как часть страницы (например сложные формы, корзины там всякие), то использовать mix достаточно удобно.

В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.

Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

Что делаем:
Подключаем в точке входа (main.js) основной стилевой файл:

import '@/styles/main.scss';
import Vue from 'vue';
//...

В нем подключаем всякое-разное-глобальное-базовое:

@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...

Далаем два файла: env-development.scss и env-production.scss

$NODE_ENV: development;
@import "cfg-vars";

$NODE_ENV: production;
@import "cfg-vars";

Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги

$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;

@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";

$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;

//==
//== Color palette
//== ======================================= ==//

$palette-light-blue: #3c8dbc; // Primary
$palette-red       : #dd4b39; // Danger
$palette-green     : #00a65a; // Success
$palette-aqua      : #00c0ef; // Info
$palette-yellow    : #f39c12; // Warning

...

Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
Идём в vue.config.js и добавляем секцию css:

const NODE_ENV = process.env.NODE_ENV === 'development'
    ? 'development'
    : 'production';
//...
module.exports = {
    //...
    css: {
        extract: NODE_ENV === 'production',
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
            },
        },
    },
};

Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

Enjoy!

<div>
   <textarea ref="textarea"></textarea> 
   <span></span>
</div>

this.$refs.textarea

Задаете атрибут ref для нужного элемента и по установленному значению обращаетесь в this.$refs

Про refs в документации

Vue-way - хранить стили в .vue, для того оно и придумано. Компонентный подход улучшает восприятие кода.

css-файл можно оставить только если, например, он уже остался от верстальщика и лень раскидывать по компонентам.

заголовки вида Access-Control-Allow-* - это заголовки ответа, их должен отправлять сервер в ответ на запрос
притом если запрос OPTIONS (браузер шлет сам перед основным запросом для проверки прав), то сервер должен так же ответить этими заголовками, но со статусом 204 и без тела

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

.parent {
  position: relative;
}
.child {
  position: absolute; 
  left:0;
  right:0;
  top:0;
  bottom:0;
}

Тебе нужен ларавель.
Остальные ответы от людей, которые не поняли вопроса.

Лара - это фреймворк специально разработанный для массового производства, в том числе и примитивных сайтов, в точности по системе "фигак-фигак и в продакшен", которую ты описываешь
Люмен и другие микрофреймворки - для ГОРАЗДО более опытных разработчиков.
CMS - это вообще не о том.