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

280
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

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

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

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

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

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

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

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

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

     182
    Кнопочка TurboGears2
    HTML

    Кнопочка TurboGears2

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

     209