Структура SPA приложения

326

29 апреля 2018, 18:31

совсем недавно решил познакомиться с Vue.js и соответственно с созданием одно-страничного приложения. В связи с этим возник ряд вопросов, так раньше работал только с MPA с использованием jQuery и там я четко себе представлял структуру, ну к примеру файл страницы html, к нему отдельный файл со скриптами и отдельный со стилями, ну и общие файлы со скриптами и со стилями. Ну а теперь собственно о вопросах которые у меня возникли:

Как структурировано SPa приложение? На сколько я видел, что в файл с компонентом помещается html разметка, стили и скрипты этого компонента... Но к примеру у меня выходит по 100-150 строк кода CSS, HTML, Vue.js это не слишком ли большое нагромождение? И что касается общих стилей они же должны выноситься в отдельный разделяемый файл?

При использование vue-router стили отделены от каждого компонента или пересекаются друг с другом? К примеру если у меня и в одном и другом компоненте есть класс text и в одном компоненте у него цвет красный а в другом черный, данный свойства пересекутся или нет?

Есть у меня имеются небольшие компоненты к примеры всплывающие окна авторизация, стоит ли их выносить в отдельный компонент, либо стоит совмещать с другими где они используются?

К примеру у менять есть четыре страницы у первых двух одинаковый футер и шапка и в других двух тоже одниковый, также в первой странице присутствуеет всплывающая форма авторизации, на сколько компонентом это все примерно нужно разбить?

Хотелось бы получить внятный ответ по поводу структуры SPA приложение желательно с использованием Vue, конечно же с затрагиванием моих вопросов. За ранее спасибо...

Answer 1

Вы можете разделить компоненты на компоненты. Это сократит ваш код.
Если вы в каком-то компоненте в тэг style добавите атрибут scoped, то стили будут действовать только на тот компонент. А без scoped эти стили будут общими для всех компонентов.
Вам следует создавать отдельный компонент тогда, когда вам нужно использовать его несколько раз. Это сократит ваш код.

P.S. Ответы на все эти вопросы вы можете найти в документации официального сайта Vue.js

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как добавить в балун кнопку, которая меняет карту?

212

HTML

Калькулятор кухонь [требует правки]

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

229

HTML

Могу ли я сделать так, чтобы пользователь смог вставить ссылку на страничку с фильмом - и у меня на странице он показался?

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

199

HTML

Кнопочка TurboGears2

Здраствуйте дорогиеНадеюсь вы мне поможете, хочу сделать кнопочку для плеера:

225