Nachdem Sie Vue eine Zeit lang studiert haben, fassen Sie die Vue-Schreibspezifikation zusammen
Regeln der Namensgebung
Schreiben Sie in Gruppenentwicklungsprojekten wartbaren Code für alle Teammitglieder und keinen einmaligen Code, damit andere Personen im Team Ihren Code auf einen Blick sehen können und Sie ihn auch nach einer gewissen Zeit wieder verwenden können Sehen Sie sich irgendwann selbst Der geschriebene Code kann auch verstanden werden, daher ist die Benennung sehr wichtig.
Allgemeine Konventionen zur Variablenbenennung
Benennungsmethode:
Namenskonvention für Kamelfälle:
Der Name muss ein Wort sein, das sich auf den Inhalt der Anforderung bezieht. Wenn ich beispielsweise eine Variable deklarieren möchte, die meine Schule darstellt, können wir constmySchool = „meine Schule“ definieren; wenn der Name im Plural steht, muss s lauten hinzugefügt, zum
Beispiel möchte ich ein Array deklarieren, um die Namen vieler Personen darzustellen, damit wir constnames=newArray();
Konstante Namenskonvention
Benennungsmethode: Nur Großbuchstaben.
Benennungskonvention:
Verwenden Sie Großbuchstaben und Unterstriche, um Namen zu kombinieren, und Unterstriche, um Wörter zu trennen.
const MAX_COUNT = 10
const URL = 'https://www.csdn.net/
Benennungskonvention für Komponenten
Die offizielle Empfehlung und Verwendung von Dokumenten folgt den Regeln:
PascalCase (der erste Buchstabe des Wortes wird großgeschrieben) ist die gebräuchlichste Deklarationskonvention.
Kebab-Case (durch Bindestriche getrennte Benennung) ist die gebräuchlichste Verwendungskonvention.
Komponentennamen sollten immer aus mehreren Wörtern bestehen, mit Ausnahme der Stammkomponente App
Aussagekräftige Substantive, kurz und lesbar, die Benennung folgt der PascalCase-Konvention.
Öffentliche Komponenten beginnen mit Abcd (Abkürzung des Firmennamens), z. B. (AbcdDatePicker, AbcdTable).
Interne Seitenkomponenten beginnen mit der Abkürzung des Komponentenmodulnamens und enden mit Item, z. B. (StaffBenchToChargeItem , StaffBenchAppNotArrItem) folgt der Kebab-Case-Konvention
Auf der Seite verwendete Komponenten müssen vorher und nachher geschlossen und durch Bindestriche getrennt werden, z. B. (, ). Befolgen Sie beim Importieren und Registrieren von Komponenten die PascalCase-Konvention. Gleichzeitig müssen Sie darauf achten: muss mit dem übereinstimmen Benutzerdefinierte Elementspezifikation: Verwenden Sie keine reservierten Wörter.
Namenskonvention für Methodenmethoden
CamelCase-Benennung, einheitliche Verwendung von Verben oder Verben + Substantiven
//bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog
请求数据方法，以 data 结尾
//bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
init、refresh 单词除外
Versuchen Sie, den Anfang gebräuchlicher Wörter zu verwenden (set, get, go, can, has, is).
Anhang: Verben, die häufig in Funktionsmethoden verwendet werden:
Holen, Get/Set-Einstellung,
Hinzufügen, Erhöhen/Entfernen,
Erstellen, Erstellen/Löschen , Entfernen
, Starten, Stoppen, Stoppen
, Öffnen, Öffnen/ Schließen, Schließen
, Lesen, Lesen/Schreiben, Schreiben,
Laden, Laden/Speichern, Speichern, Erstellen,
Erstellen/Zerstören, Zerstören,
Beginn, Start/Ende, Ende,
Sicherung Sichern/Wiederherstellen, Wiederherstellen,
Importieren/Exportieren,
Exportieren, Teilen, Teilen/Zusammenführen,
Zusammenführen, Einfügen, Einfügen/Extrahieren, Extrahieren,
Anhängen, Anhängen/Lösen, Trennen von
der Bindung, Binden/ Trennen, Trennen,
Anzeigen, Anzeigen/Durchsuchen, Durchsuchen,
Bearbeiten, Bearbeiten/Ändern, Ändern,
Auswählen, Auswählen/Markieren
Kopieren, Kopieren/Einfügen , Einfügen,
Rückgängigmachen, Rückgängigmachen /Wiederherstellen, Wiederherstellen, Einfügen, Einfügen/Löschen, Entfernen, Hinzufügen, Verbinden/Anhängen , Hinzufügen, Bereinigen, Bereinigen/ Löschen, Indizieren , Indexieren/ Sortieren, Sortieren, Finden, Suchen/Suchen, Suchen, Erhöhen, Erhöhen/Verringern, Verringern, Abspielen, Abspielen/Pause, Pause,
starten, starten/ausführen, ausführen
, kompilieren, kompilieren/ausführen, ausführen,
debuggen, debuggen/trace
, verfolgen, beobachten, beobachten/zuhören, überwachen,
erstellen, erstellen/veröffentlichen,
Eingabe, Eingabe/Ausgabe, Ausgabe
, kodieren, kodieren/dekodieren, dekodieren, verschlüsseln, verschlüsseln/entschlüsseln, entschlüsseln,
komprimieren,
komprimieren/dekomprimieren ,
dekomprimieren Verpacken/Entpacken, Entpacken,
Analysieren, Senden, Generieren,
Verbinden, Trennen, Senden,
Senden, Empfangen, Empfangen
, Herunterladen, Hochladen, Hochladen,
Aktualisieren, Aktualisieren, Synchronisieren, Synchrones
Aktualisieren, Zurücksetzen, Wiederherstellung, Sperren, Sperren,
Entsperren, Entsperren, Auschecken
, Auschecken, Einchecken,
Senden Senden/Commit Lieferung
Push Push/Pull Ziehen,
Erweitern Erweitern/Reduzieren Reduzieren
Anfang Start/Ende Ende,
Start Start/Ende Vollständig
Enter Enter/Exit Exit,
Abbruch Aufgeben/Beenden Verlassen
Veralteter Abfall/abgeschriebener Abfall,
Sammlung sammeln/Sammeln sammeln
Dateibenennung unter Ansichten
Wenn nur eine Datei vorhanden ist, wird kein Ordner angezeigt, sondern sie wird direkt im Ansichtsverzeichnis abgelegt. Beispielsweise
sollte index.vue so weit wie möglich ein Substantiv sein und die Benennung in Kamelbuchstaben verwenden.
Das Wort am Anfang ist der Name des Moduls, zu dem es gehört (workbenchIndex, workbenchList, workbenchEdit),
mindestens zwei Wörter (gut: workbenchIndex) (schlecht: workbench)
Namenskonvention für Requisiten
Bei der Deklaration von Requisiten sollten deren Namen immer „camelCase“ und in Vorlagen immer „kebab-case“ verwenden
Ausnahmen:
Temporäre Variablen mit begrenztem Gültigkeitsbereich können abgekürzt werden, z. B.: str, num, bol, obj, fun, arr.
Schleifenvariablen können abgekürzt werden, z. B. i, j, k usw.
strukturierte Spezifikation
Verzeichnisordner und Unterdateispezifikation
Die folgenden einheitlichen Verwaltungsbüros entsprechen den entsprechenden Modulen. Die
folgenden globalen Dateien werden mit index.js exportiert und die folgenden temporären Dateien werden in main.js importiert
. Nach der Verwendung ist die Schnittstelle bereits vorhanden und wird nach der Veröffentlichung gelöscht
src-Quellverzeichnis
|-- API-Schnittstelle, einheitliche Verwaltung
|-- Assets statische Ressourcen, einheitliche Verwaltung
|-- Komponenten öffentliche Komponenten, globale Dateien
|-- Filter Filter, globale Tools
|-- Symbole Symbole, globale Ressourcen
|-- Daten Simulationsdaten, temporär Speicher
|-- lib extern referenzierte Plug-in-Speicher- und Änderungsdateien
|-- Scheinsimulationsschnittstelle, temporärer Speicher
|-- Router-Routing, einheitliche Verwaltung
|-- Store Vuex, einheitliche Verwaltung
|-- Ansichten Verzeichnis anzeigen
| |-- StaffWorkbench Modulnamen anzeigen
| |-- |-- StaffWorkbench.vue-Moduleintragsseite
| |-- |-- IndexComponents-Modulkomponentenordner auf Seitenebene
| |-- |-- Components-Modul gemeinsamer Komponentenordner
Das Obige ist die Grundstruktur der Dateien im Vue-Projekt, die alle auf diese Weise zusammengesetzt sind. Die standardisierte Benennung und grundlegende Dateistruktur erleichtern uns die bessere Verwaltung und Pflege des Codes.