Именование файлов и компонентов

В Quasar важно поддерживать единообразие в именовании файлов, чтобы проект оставался читаемым и масштабируемым. Основные правила включают:

  • Файлы компонентов всегда должны иметь расширение .vue и использовать PascalCase. Например:

    UserProfile.vue
ProductList.vue

    Это позволяет отличать компоненты от обычных утилитарных файлов и упрощает автоподключение.

  • Файлы утилит и сервисов обычно используют kebab-case:

    api-service.js
date-helper.js

    Такое именование делает их легко идентифицируемыми среди других ресурсов проекта.

  • Маршруты и страницы в папке pages/ используют PascalCase или kebab-case, при этом файлы должны отражать структуру маршрутов:

    pages/
  HomePage.vue
  AboutUs.vue
  user-profile.vue

    В случае сложной вложенной структуры рекомендуется использовать папки для группировки связанных страниц:

    pages/
  admin/
    AdminDashboard.vue
    AdminSettings.vue

Именование компонентов

  • Основное правило — имя компонента должно отражать его функционал и быть осмысленным. Нельзя использовать абстрактные имена вроде Component1.vue или MyComponent.vue.

  • Локальные компоненты в пределах одного файла используют camelCase:

    <script>
import UserCard from './UserCard.vue'

export default {
  components: {
    UserCard
  }
}
</script>

    CamelCase облегчает чтение кода внутри <script> и предотвращает путаницу при импортах.

  • Глобальные компоненты регистрируются через app.component('ComponentName', Component) и должны совпадать с именем файла.

Структура и вложенность

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

    src/
  components/
    buttons/
      PrimaryButton.vue
      IconButton.vue
    cards/
      ProductCard.vue
      UserCard.vue

    Такой подход обеспечивает логическую организацию проекта и упрощает навигацию по коду.

  • Для больших проектов часто используют Feature-based Structure: структура строится по функциональным модулям:

    src/
  features/
    user/
      components/
        UserCard.vue
        UserList.vue
      pages/
        UserProfile.vue
    product/
      components/
        ProductCard.vue
      pages/
        ProductList.vue

Конвенции именования внутри Vue-файлов

  • Имя компонента внутри <script> должно совпадать с именем файла:

    <script>
export default {
  name: 'UserProfile'
}
</script>

  • Props и events используют camelCase в JavaScript и kebab-case при передаче в шаблоне:

    <UserProfile :user-id="123" @profile-updated="updateProfile" />

  • Методы и вычисляемые свойства также следуют camelCase, что улучшает читаемость и поддерживает единый стиль.

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

  • Классы CSS для компонентов рекомендуется именовать по принципу **BEM (Block__Element–Modifier)**:

    .user-card { }
.user-card__avatar { }
.user-card--active { }

    Это предотвращает коллизии имен и делает стили предсказуемыми.

  • Если используется SCSS/LESS модули в компоненте, название файла стиля совпадает с компонентом:

    UserCard.vue
UserCard.module.scss

Практические советы

  • Избегать аббревиатур и сокращений, если они не общеприняты: btn лучше заменить на button.
  • Использовать однозначные термины для компонентов: Header, Footer, Sidebar.
  • Для переиспользуемых элементов добавлять префикс: BaseButton, BaseInput. Это сразу указывает на универсальность компонента.
  • Поддерживать согласованность имен файлов, папок и внутренних имен компонентов, чтобы не возникало несоответствия между импортами и регистрацией компонентов.

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

Оглавление