Руководство по именованию компонентов Vue, не беспокойтесь об именах

JavaScript

предисловие

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

  1. Значение имени должно соответствовать характеру пользователя.
  2. У него нет того же имени, что и у знаменитостей, иметь одно и то же имя непросто, а творчество новаторское, что действительно отражает роль различения людей по именам.
  3. Громко и броско, читается плавно и красиво, и гармония красивая, ведь коннотация звучания тоже воздействует на людей, и на людей тоже имеет условный рефлекс
  4. Легко писать и легко записывать Табу слишком сложные штрихи

Что с названием в программе?

  1. Название компонента соответствует его функции
  2. Не иметь того же имени, что и другие бизнес-компоненты, чтобы люди могли отличить их с первого взгляда.
  3. Это не обязательно должно быть красиво и круто, но это практично.Пусть у разработчика будет условный рефлекс, и когда вы увидите название, вы подумаете о практической сцене этого компонента.
  4. Легко писать и запоминать, кратко, но лаконично, не громоздко

Случай однофайловых компонентов

Компоненты одного файла либо всегда начинаются с заглавной буквы(PascalCase)или всегда связывайтесь с -(kebab-case)Использование заглавных букв в начале наиболее удобно для автодополнения в редакторе кода, потому что это делает способ, которым мы ссылаемся на компоненты в JS (X) и шаблоны, максимально согласованным. Однако смешение стилей именования файлов может иногда вызывать проблемы с файловыми системами, нечувствительными к регистру, поэтому имена с тире также очень желательны.

именование базовых компонентов

Все базовые компоненты, которые применяют определенные стили и соглашения (то есть компоненты, представляющие классы, не имеющие логики или состояния), должны начинаться с определенного префикса, например Base, App или V.

**反例**
    components/
    |- button.vue
    |- loading.vue
    |- slide.vue

**正例**
    components/
    |- BaseButton.vue
    |- BaseLoading.vue
    |- BaseSlide.vue

Компоненты одного активного экземпляра

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

**反例**
    components/
    |- SaleManage.vue
    |- ImportExcel.vue

**正例**
    components/
    |- TheSaleManage.vue
    |- TheImportExcel.vue

название тесно связанного компонента

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

**反例**
    components/
    |- SearchBox.vue
    |- SearchItem.vue
    |- SearchButton.vue

**正例**
    components/
    |- SearchBox.vue
    |- SearchBoxItem.vue
    |- SearchBoxButton.vue

порядок слов в компонентах

Имена компонентов должны начинаться с высокоуровневого (обычно обобщенного) слова и заканчиваться описательным модификатором.

**反例**
    components/
    |- ClearSearchButton.vue
    |- ExcludeFromSearchInput.vue
    |- LaunchOnStartupCheckbox.vue
    |- RunSearchButton.vue
    |- SearchInput.vue
    |- TermsCheckbox.vue

**正例**
    components/
    |- SearchButtonClear.vue
    |- SearchButtonRun.vue
    |- SearchInputQuery.vue
    |- SearchInputExcludeGlob.vue
    |- SettingsCheckboxTerms.vue
    |- SettingsCheckboxLaunchOnStartup.vue

Заполните имя компонента слова

Автодополнение в редакторе уже вполне дружелюбно, так что стоимость написания длинных имен компонентов может быть ничтожно мала, а та же эффективность проще для понимания, почему бы и нет?

**反例**
    components/
    |- soManage.vue
    |- woManage.vue

**正例**
    components/
    |- SaleOrderManage.vue
    |- WorkOrderManage.vue

случай опоры

Всегда используйте при объявлении(camelCase), всегда следует использовать в шаблонах и JSX( kebab-case).
Просто следуйте соглашениям каждого языка. Более естественным в JavaScript является camelCase. В HTML это кебаб-кейс.

**反例**
props: {
  'greeting-text': String
}
<WelcomeMessage greetingText="hi"/>

**正例**
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

Категории