VSCode-Entwicklung UNI-APP Konfigurations-Tutorial und Plugin

VSCode-Entwicklung UNI-APP Konfigurations-Tutorial und Plugin

Vorne geschrieben

uni-app ist ein Framework zur Entwicklung aller Front-End-Anwendungen mit Vue.js. Entwickler schreiben eine Reihe von Codes und veröffentlichen sie auf mehreren Plattformen wie iOS, Android, H5, verschiedenen Miniprogrammen (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk/Taobao), Schnellanwendungen usw. Das beste Tool zur Entwicklung von UNI-APP ist HbuilderX. Sie fragen sich jedoch nicht, warum Sie UNI-APP in VsCode entwickeln sollten. Offiziell ist HBuilderX ein speziell für Vue entwickelter Editor. Was sollten Sie also tun, wenn es nicht Vue ist? Zu diesem Zeitpunkt müssen Sie andere Produkte auswählen. Warum also UNI-APP nicht zur Entwicklung auf andere Produkte übertragen? Aus Sicht eines einheitlichen Editors fiel die Wahl daher vor Kurzem auf VsCode.

HBuildex ist möglicherweise das beste Tool zur Entwicklung von UNI-APP, aber nicht das umfassendste Tool.

  • Bevor Sie VS Code zur Entwicklung von UNI-APP verwenden, empfehle ich dringend, den offiziellen Leitfaden Wenn Uni-App auf VSCode trifft zu lesen. Natürlich werde ich später noch einmal auf einige wichtige Schritte eingehen. Und das offizielle Tutorial vue-cli development uni-app tutorial

Vorsichtsmaßnahmen

  • VsCode kann bei der Entwicklung von UNI-APP nur als Editor fungieren. Das Debuggen von Programmen muss in der entsprechenden Umgebung erfolgen. Beispielsweise können WeChat-Applets nur in WeChat-Entwicklertools debuggt werden (das ist dasselbe wie bei HX).
  • Sie können npm-Befehle zum Ausführen und Verpacken in VsCode verwenden, aber Sie können den realen Maschinensimulator nicht direkt aufrufen und auch keine Funktionen wie APP-Verpackung verwenden. Wenn Sie solche Anforderungen haben, können Sie den Code nur in der VSCode-Umgebung bearbeiten und ihn dann über HX verpacken.

Aufbau einer Entwicklungsumgebung

1. Installieren Sie Vue-cli 3.x global (überspringen, falls bereits installiert)

npm install -g @vue/cli

Wenn Taobao Mirror installiert ist, wird empfohlen, die cnpm-Installation zu verwenden

cnpm install -g @vue/cli

2. Uni-App-Projekt über CLI erstellen

vue erstellen -p dcloudio/uni-preset-vue mein-projekt

3. Öffnen Sie das Projekt mit VsCode

4. Installieren Sie das Vue-Syntax-Prompt-Plugin

Installieren Sie das Syntax-Prompt-Plugin im Vscode-Plugin-Markt. Hier sind einige praktische Plugins empfohlen

  • Vetur Vue Syntaxhinweis-Plugin
  • vue-helper ist ein weiteres Vue-Syntax-Plugin, das in Verbindung mit Vetur verwendet wird.
  • Auto Close Tag ist ein selbstschließendes Plugin für Tags, das bei der Verwendung externer Komponenten sehr nützlich ist.
  • Auto Rename Tag Tag-Umbenennungs-Plugin, sehr nützlich, wenn Sie den Tag-Namen ändern müssen
  • Markieren Sie passende Tags Markieren Sie ausgewählte Tags und finden Sie schnell den Anfang und das Ende von Tags
  • TODO-Hervorhebung Markieren Sie die zu erledigenden Aufgaben im Code
  • Die Kombination aus „Todo Tree“ und „TODO Highlight“ bildet ein perfekteres To-Do-Managementsystem
  • koroFileHeader generiert schnell Header-Kommentare und Code-Kommentare

5. Installieren Sie die UNI-APP-Syntaxaufforderung

npm ich @dcloudio/uni-helper-json

6. Importieren Sie benutzerdefinierte HX-Codeblöcke

Laden Sie den Uni-App-Codeblock von GitHub herunter und legen Sie ihn im Verzeichnis .vscode unter dem Projektverzeichnis ab, um denselben Codeblock wie HBuilderX zu haben.

Wenn keine .vscode vorhanden ist, erstellen Sie eine neue im Stammverzeichnis des Projekts.

Sie können auch Ihre eigenen häufig verwendeten Codeblöcke anpassen

Bildbeschreibung hier einfügen

7. Projekt ausführen und veröffentlichen Sie können Projekte über den VSCode-Links-Explorer/NPM-Skript-Schnellstartbefehl ausführen und veröffentlichen

Bildbeschreibung hier einfügen

Ausführen des Projekts

npm run dev:%PLATFORM%

Veröffentlichen eines Projekts

npm führt Build aus: %PLATFORM%

Die möglichen Werte für %PLATFORM% sind wie folgt:

Wert Plattform
h5 H5
mp-alipay Alipay Mini-Programm
mp-baidu Baidu Mini-Programm
mp-weixin WeChat Mini-Programm
mp-toutiao Toutiao Mini-Programm
mp-qq qq Mini-Programme

Wenn Sie eine APP veröffentlichen möchten, können Sie dies nur über HX tun

Hinweise zur Entwicklungskonfiguration

1. Normalerweise wird beim Erstellen einer neuen Seite in HX die Seite mit demselben Namen und derselben Route automatisch in pages.json registriert. In VsCode muss das Seitenrouting selbst registriert werden

"Seiten": [ 
		{
			"Pfad": "Seiten/Homepage/Homepage"
		}
	]

Beschreibung der Release-Konfiguration: Beim Release in HX wird eine visuelle Konfigurationsschnittstelle bereitgestellt. Die Release-Konfiguration in VSCode muss in manifest.json konfiguriert werden. Das folgende Beispiel verwendet die Konfiguration der WeChat-Applet-App-ID und des H5-Verpackungspfads als Beispiel.

// manifest.json muss im JSONC-Format geöffnet werden "mp-weixin": { /* WeChat-Applet-spezifische Informationen*/
		"appid": " Ihre_wx_apid ", /* WeChat-App-ID */
		"Einstellung": {
			"urlCheck": false /* Ob der sichere Domänenname und die TLS-Version überprüft werden sollen */
		},
		"usingComponents": true /* Ob der benutzerdefinierte Komponentenmodus aktiviert werden soll */
	},


 	"h5" : { /* H5 bezogen */
			"Router" : {
					"base" : "/basePath/" /* Projekt-Basispfad */
			},
			"domain" : " Ihre_Domäne ", /* Domänenname */
			"Optimierung" : {
					"Baumschütteln" : {
							"enable" : true /* Ob die Tree-Shaking-Optimierung aktiviert werden soll */
					}
			}
		}

Weitere Konfigurationen finden Sie in der Uni-App-Konfigurationselementliste.

3. Die globale CSS-Datei kann im APP.vue -Style-Tag eingeführt werden. SCSS-Dateien können nur in die Datei uni.scss importiert und dann auf anderen Seiten verwendet werden

// APP.vue 
<style lang="scss">
	/*Gemeinsames CSS für jede Seite */
	@import url("./common/iconfont.css");
</Stil>
// uni.scss 
@import 'uview-ui/theme.scss';

easycom Regeln konfigurieren

Artikel zur Regelkompetenz von Easycom finden Sie im Easycom-Modus sowie in den praktischen Fähigkeiten, die für die Entwicklung und das Aufrufen von UNI-APP-Komponenten beherrscht werden müssen!

Easycom-Regeln werden in der Datei pages.json konfiguriert. Das Beispiel für eine benutzerdefinierte Konfiguration lautet wie folgt

// Seiten.json
	"easycom": {
		"mein-(.*)":"@/meine-ui-components/mein-$1.vue"
	},
	"Seiten":[...]

Konfigurationsbeschreibung: Wende easycom-Regeln auf alle .vue -Dateien mit dem Präfix my- im Verzeichnis my-ui-components . (Zum besseren Verständnis können Sie sich $1 als Platzhalter oder Joker vorstellen.)

Dies ist das Ende dieses Artikels über das VSCode-Entwicklungs-UNI-APP-Konfigurationstutorial und das Plug-In. Weitere relevante VSCode-Entwicklungs-UNI-APP-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • uni-app Erste Schritte Tutorial von der Installation bis zur Deinstallation
  • uni-app unterstützt Multi-Terminal-Kartenortung von Drittanbietern
  • So implementieren Sie die inkrementelle Update-Funktion in der Uni-App
  • Implementierung zum Abrufen von Elementbreite und -höhe in der Uni-App-Komponente
  • Eine kurze Einführung in die Kernkenntnisse der VUE uni-app

<<:  Detaillierte Erläuterung von Beispielen zur Fehlerbehandlung in gespeicherten MySQL-Prozeduren

>>:  Keepalived implementiert Nginx-Lastausgleich und Beispielcode für hohe Verfügbarkeit

Artikel empfehlen

Vue-Komponente zur Realisierung einer Karussell-Animation

In diesem Artikelbeispiel wird der spezifische Co...

Bevor wir eine Webseite erstellen, werfen wir einen Blick auf diese sogenannten Spezifikationen

In diesem Artikel sind einige sogenannte Spezifik...

Tiefgreifendes Verständnis der Probleme mit der Transaktionsisolationsebene und dem Sperrmechanismus von MySQL

Überblick Datenbanken führen im Allgemeinen mehre...

Installations- und Konfigurationsschritte für die grüne Dekomprimierungsversion von MySQL

Schritte: 1. MySQL-Datenbank installieren 1. Lade...

Geplante vollständige MySQL-Datenbanksicherung

Inhaltsverzeichnis 1. MySQL-Datensicherung 1.1. m...

Beispielcode zum Ändern des Textstils der Eingabeaufforderung in HTML

Auf vielen Websites wird im Eingabefeld Hinweiste...

Fassen Sie einige häufige Rankingprobleme in MySQL zusammen

Vorwort: In manchen Anwendungsszenarien stoßen wi...

Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung

1. Absoluter Pfad Zunächst einmal bezieht sich de...

Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing

Die erste Methode zur Parameterübergabe ist die d...

Vue implementiert Beispielcode, um die Funktion zum Speichern von Passwörtern im Browser zu deaktivieren

Informationen finden Einige im Internet gefundene...

Eine dauerhafte Lösung für MySQLs Unfähigkeit, Chinesisch zu erkennen

In den meisten Fällen unterstützt MySQL Chinesisc...

So realisieren Sie die vertikale Anordnung von Text mit CSS3

In einem aktuellen Projekt wollte ich Text vertik...

Mit CSS3 erstellter Hover-Zoom-Effekt

Ergebnis:Implementierungscode: html <link href...

Linux: Fünf-Schritte-Kernel-Build-Baum

Inhaltsverzeichnis 0. Der mit dem System geliefer...

Linux verwendet den Binärmodus zur Installation von MySQL

In diesem Artikel werden die einzelnen Schritte z...