Vue optimierte Code-Sharing im Stil

Der Styleguide auf der offiziellen Vue-Website ist nach Priorität klassifiziert (notwendig, dringend empfohlen, empfohlen und mit Vorsicht verwendet), und die Codeintervalle sind groß und schwer abzufragen. Dieser Artikel ist nach Typ klassifiziert und enthält einige Beispiele oder Erklärungen. Es handelt sich um eine optimierte Version des Vue-Styleguides. In diesem Artikel werden hauptsächlich die relevanten Informationen des Vue-Styleguides vorgestellt, einschließlich Komponentennamen, Anweisungen und Funktionen Ich kann darauf verweisen. Ich hoffe, es hilft allen.

Komponentenname

[Komponentenname muss aus mehreren Wörtern bestehen] (erforderlich)

Komponentenname sollte immer aus mehreren Wörtern bestehen, mit Ausnahme der Stammkomponente App. Dadurch werden Konflikte mit bestehenden und zukünftigen HTML-Elementen vermieden, da alle HTML-Elementnamen aus Einzelwörtern bestehen

//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})

[Einzeldatei-Komponentendateinamen sollten immer mit einem Großbuchstaben (PascalCase) beginnen oder immer verbunden sein mit einer horizontalen Linie (Kebab-Fall)] (dringend empfohlen)

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue

[Der Name der Basiskomponente muss mit einem bestimmten Präfix beginnen] (dringend empfohlen)

Anwendungsspezifische Basiskomponenten von Stile und Konventionen (d. h. Präsentations-, nicht-logische oder zustandslose Komponenten) sollten alle mit einem bestimmten Präfix beginnen, z. B. Base, App oder V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

[sollten nur Komponenten einer einzelnen aktiven Instanz haben sollten mit dem Präfix The benannt werden, um ihre Einzigartigkeit zu zeigen] (dringend empfohlen)

Dies bedeutet nicht, dass die Komponente nur auf einer einzelnen Seite verwendet werden kann, sondern dass jede Seite nur einmal verwendet werden kann Akzeptieren Sie niemals irgendwelche Requisiten

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

[Unterkomponenten, die eng mit der übergeordneten Komponente verbunden sind, sollten mit dem Namen der übergeordneten Komponente als Präfix benannt werden] (dringend empfohlen)

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

[Die Dem Komponentennamen sollte „High-Level“ vorangestellt werden (normalerweise allgemein beschrieben), beginnend mit einem Wort und endend mit einem beschreibenden Modifikator] (dringend empfohlen)

//bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
//good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

[Der Komponentenname in Einzeldateikomponenten und String-Vorlagen sollten immer PascalCase sein ——Aber immer Kebab-Case in DOM-Vorlage] (dringend empfohlen)

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

[Komponentennamen sollten eher vollständige Wörter als Abkürzungen sein] (dringend empfohlen)

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Komponentenbezogen

[Einzelne Dateikomponenten, String-Vorlagen und Komponenten ohne Inhalt in JSX sollten selbstschließend sein – tun Sie dies jedoch nicht in DOM-Vorlagen] (dringend empfohlen)

Selbstschließende Komponenten zeigen an, dass sie nicht nur keinen Inhalt haben, sondern auch absichtlich keinen Inhalt haben

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

[Bereich für Komponentenstile festlegen] (erforderlich)

Diese Regel betrifft nur zu Einzeldateikomponenten. Es ist nicht erforderlich, das Attribut „scoped“ zu verwenden. Das Scoping kann auch über CSS-Module oder mithilfe anderer Bibliotheken oder Konventionen erfolgen

//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button class="btn btn-close">X</button></template>
<style scoped>
.btn-close {background-color: red;}
</style>
//good
<template><button :class="[$style.button, $style.buttonClose]">X</button></template>
<style module>
.btn-close {background-color: red;}
</style>

[Einzeldateikomponenten sollten immer die Reihenfolge