Vue Academy · Урок

Масштабируемая структура папок

Организуйте крупные проекты Vue так, чтобы их было удобно поддерживать

«Масштабируемая структура папок» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Структура имеет значение

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

Организация по типу

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

src/
  components/
  views/
  stores/
  composables/
  router/

Организация по функциям

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

src/
  features/
    auth/
      LoginView.vue
      useAuth.js
      authStore.js
    cart/
      CartView.vue
      cartStore.js

Выбор подхода

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

Разделение представлений и компонентов

Различайте представления — компоненты уровня страницы, связанные с маршрутами, — и компоненты — повторно используемые строительные блоки. Такое разделение помогает понять, какие части связаны с маршрутами, а какие используются совместно.

views/      // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vue

Организация компонуемых функций

Храните повторно используемую логику API композиции в папке composables. Префикс use в их именах сразу показывает их назначение.

composables/
  useAuth.js
  useFetch.js
  useLocalStorage.js

Организация хранилищ

Размещайте глобальные хранилища состояния в папке stores, по одному файлу на каждую предметную область. Так управлением состоянием легко находить нужные части и удобно управлять им по модулям.

stores/
  user.js
  cart.js
  settings.js

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

Последовательность уменьшает количество лишней работы. Используйте PascalCase для файлов компонентов, добавляйте префикс Base к базовым компонентам и выбирайте имена из нескольких слов, чтобы избежать конфликтов с элементами HTML.

// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue

// composables
useAuth.js

Общий экспорт

Общий экспорт — это файл index.js, который повторно экспортирует содержимое папки, поэтому пользователи импортируют всё из одного пути, а не из множества.

// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"

Импорт из общего файла

Благодаря общему файлу несколько импортов объединяются в одну аккуратную строку, что улучшает читаемость.

import { useAuth, useFetch } from "@/composables"

Последовательность прежде всего

Какую бы структуру вы ни выбрали, применяйте её последовательно и документируйте в проекте README. Лучшая структура — та, которую понимает и соблюдает вся команда. По мере роста приложения перестраивайте её с учётом функций.

Быстрая проверка

Проверьте свои знания о структуре папок.

Итоги

Для небольших приложений организуйте код по типу, а при масштабировании — по функциям. Отделяйте представления, связанные с маршрутами, от повторно используемых компонентов, храните компонуемые функции и хранилища в отдельных папках, соблюдайте единые правила именования и используйте общий экспорт для аккуратных импортов. Именно последовательность, зафиксированная в документации для команды, делает структуру по-настоящему масштабируемой.

Часто задаваемые вопросы

Урок «Масштабируемая структура папок» бесплатный?

Да — полный текст урока «Масштабируемая структура папок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Масштабируемая структура папок»?

Организуйте крупные проекты Vue так, чтобы их было удобно поддерживать Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Масштабируемая структура папок»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy