So implementieren Sie einen optimierten Stil in Vue (ausführliches Tutorial)-js-Tutorial-php.cn

In diesem Artikel werden die relevanten Wissenspunkte des optimierten Vue-Stils erläutert und der Beispielcode weitergegeben. Interessierte Freunde können darauf verweisen.

Wie bereits erwähnt

Der Styleguide auf der offiziellen Vue-Website ist nach Priorität klassifiziert (in der Reihenfolge „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

Komponentenname

[Komponentenname besteht aus mehreren Wörtern] (erforderlich)

Komponentennamen sollten 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 einem Wort bestehen verbunden mit einer horizontalen Linie (Kebab-Fall)] (dringend empfohlen)

//bad
Vue.component(&#39;todo&#39;, {})
//good
Vue.component(&#39;todo-item&#39;, {})

Nach dem Login kopieren

[Grundkomponentennamen müssen mit einem bestimmten Präfix beginnen] (dringend empfohlen)

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

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

Nach dem Login kopieren

[Komponenten, die nur eine einzige aktive Instanz haben sollten, sollten sie benennen mit dem Präfix

, um seine Einzigartigkeit anzuzeigen] (dringend empfohlen) TheDies bedeutet nicht, dass die Komponente nur auf einer einzelnen Seite verwendet werden kann, sondern dass

jede Seite nur verwendet werden kann einmal, Diese Komponenten akzeptieren niemals irgendwelche Requisiten
//bad components/ |- MyButton.vue |- VueTable.vue |- Icon.vue //good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
Nach dem Login kopieren
[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/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

Nach dem Login kopieren

[Die Dem Komponentennamen sollte der Name der übergeordneten Komponente vorangestellt werden] (normalerweise allgemein beschrieben), beginnend mit einem Wort und endend mit einem beschreibenden Modifikator] (dringend empfohlen)

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

Nach dem Login kopieren

[Komponentennamen in Einzeldateikomponenten und Zeichenfolgenvorlagen sollten immer PascalCase sein – aber in DOM-Vorlagen immer Kebab-Groß-/Kleinschreibung] (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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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)

Selbst -Schließende Komponenten bedeuten, dass sie nicht nur keinen Inhalt haben, sondern auch absichtlich keinen Inhalt

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

Nach dem Login kopieren

[Bereich für Komponentenstile festlegen] (erforderlich)

Diese Regel ist nur für Einzeldateikomponenten relevant.

Es ist nicht notwendig, die Funktion zu verwenden. Der Bereich kann auch über CSS-Module oder mithilfe anderer Bibliotheken oder Konventionen festgelegt werden.

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

Nach dem Login kopieren

scoped [Einzeldateikomponenten sollten die Reihenfolge der Tags

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse