vue designer

Vue Designer

Vue -Komponenten -Design -Tool.

Diese Erweiterung arbeitet noch in Arbeit. Wenn Sie einige Feedbacks für diese Erweiterung haben, wäre es sehr hilfreich!

Schneller Start

• Laden Sie die VSCODE -Erweiterung herunter

• Öffnen Sie den Befehl pallete und wählen Sie Open Vue Designer . Anschließend sehen Sie einen Vorschau -Bereich von aktuell geöffneten Einzeldateikomponenten ( .vue ).

Einstellungen

vueDesigner.sharedStyles

Eine Reihe von CSS -Pfaden, die in der Vorschau geladen werden. Es ist nützlich, wenn Ihre Anwendung globales CSS wie das Reset CSS hat.

{
  "vueDesigner.sharedStyles" : [ " reset.css " ]
}

Beachten Sie, dass es @import im geladenen CSS noch nicht unterstützt. Sie müssen alle abhängigen CSS -Dateien angeben.

Unterstützte Präprozessoren

Der Vue -Designer unterstützt Präprozessoren derzeit nicht aktiv auf <template> , <script> und <style> Blöcken. Sprachen, die nicht in der folgenden Liste enthalten sind, funktionieren möglicherweise nicht auf Vue -Designer.

• HTML ( <template> )
• JavaScript ( <script> )
• TypeScript ( <script lang="ts"> )
• CSS ( <style> )

Entwicklung

Der Vue -Designer wird durch zwei Module getrennt - Server und Client.

Der Server wird vom Editor -Prozess ausgeführt und mit der Analyse/Analyse von Komponentencode und der Bearbeitung von Client -Anforderungen verantwortlich. Der Client dient zur Wiedergabe von Compnent -Vorschau und zur Behandlung der Interaktion der Benutzer. Der Server und der Client kommunizieren nach WebSocket, um Komponentendaten zu synchronisieren.

Der Servercode ist in TypeScript geschrieben und mit dem CommonJS -Format kompiliert, während sich auch der Client -Code in TypeScript befindet, aber von VITE gebündelt ist.

Die Codes nur für den Client sollten in src/view sein.

Alle Codes sollten von schöneren formatiert werden.

Für Typierungen externer Pakete, die nicht vorhanden sind, sollten in types/(package name) enthalten sein.

Visual Studio -Codeerweiterung

Befolgen Sie die folgenden Schritte, um auf VSCODE zu debuggen:

1. Führen Sie yarn watch aus, um Dev Server zu starten.
2. Öffnen Sie VSCODE und zeigen Sie Debug -Bereich auf der linken Seite des Herausgebers.
3. Führen Sie Launch Extension aus, damit ein neues Fenster mit Aktivieren lokaler Vue -Designer eröffnet wird.
4. Wählen Sie Open Vue Designer auf Befehl pallete.

Wenn Sie Dev Tools für den Client -Code verwenden möchten, verwenden Sie Entwickler: Entwickler -Entwickler -Tools -Befehl im Befehl pallete.

Befehle

 # build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# format sources with prettier
$ yarn format

Freigeben

$ npm version XXX # -> update version & generate changelog

# after edit changelog if needed
$ git add CHANGELOG.md
$ git commit -m " docs: changelog vXXX "

$ vsce publish