Я изучаю VueJS 2, ранее разрабатывая веб-приложения с использованием AngularJS 1.
В VueJS 2 ваше приложение создается с использованием компонентов.
(На первый взгляд они не слишком отличаются от директив AngularJS)
VueJS рекомендует хранить все части компонента в одном .vueфайле, включая шаблон и стили.
Ссылка ниже дает действительно хороший обзор того, как структурировать эти файлы, и объясняет преимущества создания независимых повторно используемых компонентов.
В отличие от AngularJS, компоненты VueJS не поддерживают внешние файлы шаблонов:
Начнем с того, что я не был уверен, стоит ли хранить HTML-шаблон и стили в файле JavaScript. Это потребовало отхода от заученных привычек полностью разделять презентацию и функциональность.
Попробовав это, я обнаружил, что хранить все вместе в одном файле на самом деле очень полезно. Отчасти потому, что это упрощает поиск вещей, а в основном потому, что вынуждает меня делать вещи маленькими.
Я не хочу, чтобы мои компоненты Vue становились слишком большими. Если что-то становится громоздким в одном файле, это, вероятно, означает, что его следует разделить на более мелкие компоненты.
Построение пользовательского интерфейса в виде набора небольших отдельных компонентов значительно упрощает переработку или перемещение отдельных разделов и контейнеров на вашем сайте.
Если вы работаете с дизайнером и вам нужно преобразовать макеты дизайна в функциональный пользовательский интерфейс, создание каждого компонента по отдельности может дать очень хорошую точку фокусировки. Общие стили приложения по-прежнему могут быть выполнены в центральном базовом файле CSS, но может быть полезно использовать стили компонентов для некоторых второстепенных требований к макету (таких как display: block и т. д.).
Удобно, что IDE JetBrains (Webstorm и т. д.) также добавили поддержку VueJS.
Я пока ни о чем не жалею :)
