So implementieren Sie einen optimierten Stil in Vue (ausführliches Tutorial)

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

<p>Wie bereits erwähnt

<p>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

<p>Komponentenname

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

<p>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)

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

<p>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

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

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

jede Seite<p> 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)

<p>[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)

<p>[Komponentennamen in Einzeldateikomponenten und Zeichenfolgenvorlagen sollten immer PascalCase sein – aber in DOM-Vorlagen immer Kebab-Groß-/Kleinschreibung] (dringend empfohlen)

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

<p>Komponentenbezogen

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

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

<p>[Bereich für Komponentenstile festlegen] (erforderlich)

<p>Diese Regel ist nur für Einzeldateikomponenten relevant.

Es ist nicht notwendig, <p> die Funktion zu verwenden. Der Bereich kann auch über CSS-Module oder mithilfe anderer Bibliotheken oder Konventionen festgelegt werden. scoped [Einzeldateikomponenten sollten die Reihenfolge der Tags