Как структурировать проект Vue.js

Идеальная структура папок Vue.js и архитектура компонентов с умными и тупыми компонентами

Vue.js - это больше, чем реклама, это отличный интерфейс. С ним довольно легко начать работу и создать веб-приложение. Vue.js часто называют каркасом для небольших приложений и даже иногда альтернативой jQuery из-за его небольшого размера! Я лично считаю, что он также может подходить для более крупных проектов, и в этом случае важно хорошо структурировать его с точки зрения архитектуры компонентов.

Прежде чем начать свой первый большой проект Vue.js, я провел небольшое исследование, чтобы найти идеальную структуру папок, архитектуру компонентов и соглашение об именах. Я просмотрел документацию Vue.js, несколько статей и множество проектов с открытым исходным кодом GitHub.

Мне нужно было найти ответы на несколько вопросов, которые у меня были. Вот что вы найдете в этом посте:

  • Как вы структурируете файлы и папки внутри проекта Vue.js?
  • Как вы пишете Smart и Dumb компоненты и где их размещаете? Это концепция от React.
  • Каков стиль кодирования Vue.js и лучшие практики?

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

Структура папок Vue.js

Вот содержимое папки src. Я рекомендую вам начать проект с Vue CLI. Я лично использовал шаблон Webpack по умолчанию.

,
App── app.css
App── App.vue
Assets── активы
│ └── ...
Components── компоненты
│ └── ...
Main── main.js
Mix── миксин
│ └── ...
Router── роутер
Index └── index.js
Store── магазин
Index ├── index.js
Modules ├── модули
│ │ └── ...
│ └── мутация-types.js
├── переводы
Index └── index.js
Util── утилит
│ └── ...
Views── просмотров
    └── ...

Несколько подробностей о каждой из этих папок:

  • активы - где вы помещаете любые активы, которые импортируются в ваши компоненты
  • компоненты - Все компоненты проектов, которые не являются основными видами
  • mixins - mixins - это части кода JavaScript, которые повторно используются в различных компонентах. В миксине вы можете поместить методы любого компонента из Vue.js, они будут объединены с методами компонента, который его использует.
  • router - Все маршруты ваших проектов (в моем случае они есть в index.js). В основном в Vue.js все является компонентом. Но не все это страница. На странице есть маршрут типа «/ приборная панель», «/ настройки» или «/ поиск». Если у компонента есть маршрут, он маршрутизируется.
  • store (необязательно) - константы Vuex в mutation-type.js, модули Vuex в модулях подпапок (которые затем загружаются в index.js).
  • переводы (необязательно) - файлы локалей, я использую Vue-i18n, и он работает довольно хорошо.
  • utils (необязательно) - функции, которые я использую в некоторых компонентах, такие как тестирование регулярных выражений, константы или фильтры.
  • Представления - чтобы сделать проект более быстрым для чтения, я разделяю маршрутизируемые компоненты и помещаю их в эту папку. Компоненты, которые маршрутизируются для меня, - это больше, чем компонент, так как они представляют страницы и имеют маршруты, я помещаю их в «представления», а затем, когда вы проверяете страницу, вы переходите в эту папку.

В конце концов, вы можете добавить другие папки в зависимости от ваших потребностей, таких как фильтры или константы API.

Некоторые ресурсы меня вдохновили

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Смарт против тупых компонентов с Vue.js

Умные и тупые компоненты - это концепция, которую я узнал от React. Интеллектуальные компоненты также называются контейнерами, они управляют изменениями состояния и отвечают за работу. Напротив, немые компоненты, также называемые презентационными, обрабатывают только внешний вид.

Если вы знакомы с шаблоном MVC, вы можете сравнить компоненты дампа с View и интеллектуальные компоненты с Controller!

В React умные и немые компоненты обычно помещаются в разные папки, тогда как в Vue.js они помещаются в одну и ту же папку: компоненты. Для дифференциации в Vue.js вы будете использовать соглашение об именах. Допустим, у вас есть тупой компонент карты, тогда вы должны использовать одно из следующих имен:

  • BaseCard
  • AppCard
  • VCard

Если у вас есть интеллектуальный компонент, который использует BaseCard и добавляет к нему несколько методов, вы можете, например, назвать его в зависимости от вашего проекта:

  • ProfileCard
  • ItemCard
  • NewsCard

Если ваш смарт-компонент - это не только «умнее» BaseCard с методами, просто используйте любое имя, которое подходит вашему компоненту и не начинается с Base (или App, или V), например:

  • DashboardStatistics
  • Результаты поиска
  • Профиль пользователя

Это соглашение об именах взято из официального руководства по стилю Vue.js, которое также содержит соглашения об именах!

Соглашения об именах

Вот несколько соглашений, взятых из официального руководства по стилю Vue.js, которые необходимы для правильной структуры вашего проекта:

  • Имена компонентов всегда должны быть многословными, за исключением корневых компонентов «приложения». Например, используйте «UserCard» или «ProfileCard» вместо «Card».
  • Каждый компонент должен быть в своем собственном файле.
  • Имена файлов однофайловых компонентов должны быть всегда PascalCase или всегда kebab-case. Используйте «UserCard.vue» или «user-card.vue».
  • Компоненты, которые используются только один раз на страницу, должны начинаться с префикса «The», чтобы обозначить, что может быть только один. Например, для панели навигации или нижнего колонтитула вы должны использовать «TheNavbar.vue» или «TheFooter.vue».
  • Дочерние компоненты должны включать их родительское имя в качестве префикса. Например, если вы хотите использовать компонент «Фото», используемый в «Карте пользователя», назовите его «UserCardPhoto». Это для лучшей читаемости, так как файлы в папке обычно расположены в алфавитном порядке.
  • Всегда используйте полное имя вместо сокращения в названии ваших компонентов. Например, не используйте «UDSettings», вместо этого используйте «UserDashboardSettings».

Vue.js официальный гид по стилю

Независимо от того, являетесь ли вы опытным или новичком в Vue.js, вам следует прочитать это руководство по стилю Vue.js, в котором содержится множество советов, а также соглашений об именах. Он содержит много примеров того, что нужно делать, а что нет.

Если вам понравился этот пост, пожалуйста, нажмите несколько раз кнопку «хлоп» ниже, чтобы показать свою поддержку! Кроме того, не стесняйтесь комментировать и давать любые отзывы. Не забудьте следовать за мной!

Хотите увидеть больше статей, как эта? Поддержи меня на Патреоне