Именование и структура файлов

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

Основные принципы именования

  1. Именование компонентов страниц

    • Компоненты, которые используются как страницы, принято называть с суффиксом Page. Например:

      HomePage.vue
AboutPage.vue
UserProfilePage.vue

    • Такой подход сразу отличает компоненты страниц от обычных UI-компонентов, используемых внутри страниц.

  2. Именование маршрутов

    • Каждому маршруту задается уникальное имя через свойство name в объекте маршрута. Рекомендуется использовать каменный кейс (PascalCase) для имен маршрутов:

      const routes = [
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/about', component: AboutPage, name: 'About' },
  { path: '/users/:id', component: UserProfilePage, name: 'UserProfile' }
];

    • Имена маршрутов используются в <router-link> и методах router.push({ name: 'RouteName' }), что делает код более читаемым и защищает от ошибок при изменении пути.

  3. Именование вложенных компонентов

    • Для дочерних компонентов, которые служат частью страницы, рекомендуется использовать префикс, отражающий их принадлежность:

      UserProfileHeader.vue
UserProfileDetails.vue
UserProfilePosts.vue

    • Это упрощает навигацию по проекту и предотвращает конфликты имен.

Рекомендуемая структура каталогов

src/
├── router/
│   └── index.js
├── views/
│   ├── HomePage.vue
│   ├── AboutPage.vue
│   └── users/
│       ├── UserProfilePage.vue
│       └── UserSettingsPage.vue
├── components/
│   ├── common/
│   │   ├── Button.vue
│   │   └── Modal.vue
│   └── users/
│       ├── UserProfileHeader.vue
│       ├── UserProfileDetails.vue
│       └── UserProfilePosts.vue
└── App.vue
  • router/ — папка для всех маршрутов приложения. Основной файл — index.js, который экспортирует экземпляр маршрутизатора.
  • views/ — папка для компонентов страниц (Page), соответствующих маршрутам. Подпапки создаются для логически связанных страниц.
  • components/ — папка для переиспользуемых компонентов. Разделение на подкаталоги (common, users и т.д.) улучшает масштабируемость.

Принципы организации маршрутов

  1. Разделение маршрутов по логике

    • Главные маршруты и вложенные маршруты лучше группировать. Например:

      const routes = [
  {
    path: '/users',
    component: UsersLayoutPage,
    children: [
      { path: ':id', component: UserProfilePage, name: 'UserProfile' },
      { path: ':id/settings', component: UserSettingsPage, name: 'UserSettings' }
    ]
  }
];

    • Родительский компонент (UsersLayoutPage) может содержать общий шаблон и <router-view> для дочерних маршрутов.

  2. Lazy loading компонентов

    • Для оптимизации загрузки приложения страницы подключаются динамически:

      const UserProfilePage = () => import('@/views/users/UserProfilePage.vue');

    • Это уменьшает размер начального бандла и ускоряет загрузку.

  3. Консистентность путей

    • Пути маршрутов должны отражать структуру файлов и иерархию страниц. Пример:

      /users/:id         → UserProfilePage.vue
/users/:id/settings → UserSettingsPage.vue

    • Такой подход делает URL понятными и предсказуемыми.

Дополнительные рекомендации

  • Использовать PascalCase для имен страниц и маршрутов, kebab-case для путей.
  • Разделять переиспользуемые UI-компоненты (components/) и страницы (views/) для лучшей читаемости.
  • Для сложных проектов создавать поддиректории для логически связанных страниц и компонентов.
  • Поддерживать одинаковый стиль именования по всему проекту для уменьшения когнитивной нагрузки при навигации по коду.
  • Всегда указывать имя маршрута (name) даже для простых страниц — это облегчает рефакторинг путей.

Правильная структура и именование в сочетании с Vue Router создают ясную, предсказуемую архитектуру, упрощают поддержку и масштабирование приложений на Vue.js.

Оглавление