Идеальная структура папок 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.css
├── App.vue
├── assets
│   └── ...
├── components
│   └── ...
├── main.js
├── mixins
│   └── ...
├── router
│   └── index.js
├── store
│   ├── index.js
│   ├── modules
│   │   └── ...
│   └── mutation-types.js
├── translations
│   └── index.js
├── utils
│   └── ...
└── views
    └── ...

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

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

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

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

Умные и глупые компоненты с Vue.js

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

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

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

  • BaseCard
  • AppCard
  • VCard

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

  • ProfileCard
  • ItemCard
  • NewsCard

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

  • ДашбордСтатистика
  • Результаты поиска
  • Профиль пользователя

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

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

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

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

Официальное руководство по стилю Vue.js

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



Руководство по стилю - Vue.js
Это официальное руководство по стилю для кода, специфичного для Vue. Если вы используете Vue в проекте, это отличный совет, чтобы избежать… vuejs.org