


NgSysV.Installieren von Sveltekit und Erstellen einer einfachen reinen HTML-Webanwendung
Nov 27, 2024 am 09:01 AMDiese Beitragsserie ist auf NgateSystems.com indiziert. Dort finden Sie auch eine ?u?erst nützliche Stichwortsuchfunktion.
Letzte Bewertung: 24. November
1. Einführung
Dieser Beitrag soll Ihnen einen ersten Einblick in die Realit?t des Lebens als Webapp-Entwickler geben. Es endet mit einer einfachen funktionierenden Webanwendung, muss aber mit den kniffligen ?Installations“-Aufgaben beginnen, die Sie bew?ltigen müssen, um an den Punkt zu gelangen, an dem Sie diese ausführen k?nnen.
Auch wenn dies ein ?rgernis ist, bleiben Sie dabei. Sobald Sie diese aus dem Weg ger?umt haben, haben Sie die M?glichkeit, mit dem VSCode-Editor von Microsoft ein kleines Stück HTML zu erstellen. Abschlie?end verwenden Sie eine VSCode-Terminalsitzung, um dies im Browser über den lokalen Sveltekit-Server zu starten.
H?rt sich das gut an? Dann lesen Sie weiter.
2. Installation
Absolute Anf?nger finden diesen Abschnitt m?glicherweise schwierig, da er einige Verfahren beinhaltet, die nicht besonders benutzerfreundlich sind. Aber es dauert nicht lange und Sie werden sich einige grundlegende F?higkeiten aneignen, die Sie in Zukunft immer wieder anwenden werden. Folgendes werden Sie tun:
- Erstellen Sie ein Projekt
- Installieren Sie VSCode und ?ffnen Sie Ihr Projekt darin
- Er?ffnen Sie eine Terminalsitzung
- Node.js und npm installieren
- Installieren Sie SvelteKit.
2.1 Ein Projekt erstellen
Ihr erster Schritt besteht darin, mit dem Windows-Datei-Explorer ein neues Projekt zu erstellen. Hierfür müssen Sie einen Namen w?hlen. Ich empfehle Ihnen, Kleinbuchstaben und Bindestriche zu verwenden und den Namen kurz zu halten. So etwas wie svelte-dev k?nnte eine gute Idee sein. Sie sollten Ihren Ordner auch nicht im versionierten Dropbox- oder OneDrive-Speicher ablegen. Webanwendungsprojekte neigen dazu, sehr umfangreich zu werden und neigen dazu, allgemeine Versionierungssysteme zu überfordern. In jedem Fall stellen VSCode und Git die gesamte Versionierung bereit, die Sie ben?tigen.
2.2 VSCode installieren und Ihr Projekt zu seinem ?Arbeitsbereich“ hinzufügen
Befolgen Sie die Anweisungen unter ?Erste Schritte mit Visual Studio Code“, um die Software auf Ihrem Ger?t zu installieren. Starten Sie es über das Desktopsymbol und beachten Sie den Eintrag ?Datei“ in der Menüleiste oben auf dem Bildschirm von VSCode. Klicken Sie darauf, w?hlen Sie ?Ordner zum Arbeitsbereich hinzufügen“, navigieren Sie zum Speicherort Ihres Projektordners und w?hlen Sie ihn aus bzw. fügen Sie ihn hinzu.
Zu diesem Zeitpunkt werden auf dem VSCode-Bildschirm drei Informationsspalten unterhalb der Menüleiste angezeigt: eine Symbolleiste, ein ?Explorer“-Panel mit Details zum ?Arbeitsbereich“-Inhalt und ein gro?er leerer Bereich, der darauf wartet, dass Sie Arbeitsbereichsdateien bearbeiten.
Sie fragen sich vielleicht, warum VSCode Sie mit einem ?Arbeitsbereich“-Konzept belastet, wenn Sie nur ein einziges Projekt haben. Dies liegt daran, dass Sie im Laufe der Zeit zahlreiche Projekte ansammeln und feststellen, dass Sie Code zwischen ihnen austauschen m?chten. Der ?Arbeitsbereich“ erm?glicht Ihnen die Bearbeitung einer Gruppe von Projekten. Sie k?nnen ein Projekt aus dem Arbeitsbereich entfernen, indem Sie mit der rechten Maustaste darauf klicken und ?Ordner aus Arbeitsbereich entfernen“ ausw?hlen. Wenn Sie VSCode schlie?en und neu starten, werden Sie feststellen, dass es sich Ihre vorherige Einstellung für den Arbeitsbereichsinhalt gemerkt hat und diese wiederherstellt.
Da Sie VSCode h?ufig verwenden, sollten Sie darüber nachdenken, VSCode an Ihre Desktop-Symbolleiste anzuheften. Beachten Sie, dass VSCode nach dem Hinzufügen eines Projekts zu einem Arbeitsbereich zwischen Neustarts daran festh?lt, bis Sie den Ordner explizit mit einem R-Klick-Befehl ?Ordner aus Arbeitsbereich entfernen“ entfernen.
2.3 ?ffnen einer Terminalsitzung in VSCode
Sie k?nnen eine neue Terminalsitzung für Ihr Projekt ?ffnen, indem Sie im VSCode-Menü ?Terminal –> Neues Terminal“ ausw?hlen und dann in der angezeigten Liste auf den Eintrag Ihres Projekts klicken. Wenn die Option ?Terminal“ in der Menüleiste nicht sichtbar ist, finden Sie sie im Overspill-Bereich ?…“.
Das ?Terminal“ sollte als Unterfenster unten im Bearbeitungsbereich auf der rechten Seite des VSCode-Bildschirms erscheinen. Seine H?he und Breite k?nnen durch Klicken und Ziehen am oberen und linken Rand ge?ndert werden. Sie werden feststellen, dass Sie es auch wieder mit der Strg-Tastenkombination ein- oder ausschalten k?nnen. Derzeit wartet es darauf, dass Sie ?Terminalsitzungs“-Befehle in einer Zeile eingeben, der die vollst?ndige Adresse Ihres Projektordners vorangestellt ist.
Wenn Ihre IT-Erfahrung bisher ausschlie?lich auf der Verwendung von ?Klicken und Zeigen“ auf Windows- (Microsoft) und iOS-Bildschirmen (Mac) basiert, kann es sein, dass Sie sich in diesem Beitrag stark auf die Verwendung von ?Terminal“-Sitzungen verlassen als unwillkommener Schock.
Das Wort ?Terminal“ führt Sie hier zurück in die Anf?nge der Informatik, lange vor dem Erscheinen der ?grafischen Benutzeroberfl?chen“, die wir heute verwenden. Entwickler verwendeten dann ?Terminal“-Ger?te wie Fernschreiber oder ?VDU“-Bildschirme, um Betriebssystemanweisungen durch die Eingabe von ?Befehlen“ statt durch Klicken auf Schaltfl?chen auszugeben. Für Systemprogrammierer bieten diese ?Command Shell“-Schnittstellen dennoch gro?e Vorteile, da sie einfach einzurichten und sehr flexibel sind. Daher werden Terminalsitzungen weiterhin h?ufig im Entwicklungsprozess eingesetzt. Wenn Sie mit ?Point-and-Click“-Schnittstellen aufgewachsen sind, werden Sie diese natürlich als einen Rückschritt betrachten. Aber Sie werden schnell feststellen, dass sie gut funktionieren und in jedem Fall einen weiteren nützlichen Baustein für Ihr wachsendes Spektrum an Entwicklungskompetenzen darstellen.
Man k?nnte ein Buch über Terminalbefehle schreiben, aber im Moment müssen Sie nur ein paar grundlegende Fakten kennen. Erstens werden Sie feststellen, dass Sie einen Terminalbefehl nicht mit der Maus bearbeiten k?nnen. Wenn Sie mitten in einem Befehl einen Fehler entdecken, müssen Sie den nachfolgenden Inhalt mit der ?Rücktaste“ entfernen und erneut eingeben. Diese Unannehmlichkeit wird jedoch durch die Tatsache ausgeglichen, dass die in VSCode verwendete standardm??ige Powershell-Terminalsitzung einen Verlauf der von Ihnen verwendeten Befehle speichert und es Ihnen erm?glicht, auf einen vorherigen Befehl zu verweisen, indem Sie wiederholt die Aufw?rtspfeiltaste drücken, bis der gewünschte Befehl angezeigt wird. Mit der Pfeil-nach-unten-Taste wird der Vorgang umgekehrt.
2.4 Node.js und npm installieren
Du fühlst dich vielleicht schon etwas müde, aber bleib dabei. Sie sind fast an einem Punkt angelangt, an dem Sie mit der Verwendung von SvelteKit beginnen k?nnen.
Das ?Problem“ ist, dass SvelteKit als ?Paket“ über das Internet verbreitet wird. Für die Installation des SvelteKit-Pakets ist ein ?Paketmanager“ erforderlich. Was ist ein Paket und was ist ein Paketmanager?
Ein ?Paket“ ist eine ordentlich gebündelte Sammlung von Codedateien, die sorgf?ltig mit Versionsnummern versehen sind und von Details zu ihren Abh?ngigkeiten von anderen Paketen begleitet werden. Moderne Softwareentwicklungspraktiken nutzen Pakethierarchien, um nützliche Codekomponenten gemeinsam zu nutzen.
Ein ?Paketmanager“ ist ein Tool, mit dem Sie ein Paket in einem Projekt ?installieren“ k?nnen, indem Sie dessen Codeinhalt entpacken und in Projektordner kopieren. Der Paketmanager prüft die Kompatibilit?t mit eventuell anderen installierten Paketen.
Der Paketmanager, den Sie hier verwenden, hei?t npm (Node Package Manager). Die Paketverwaltung ist anspruchsvoll, daher stehen für spezielle Situationen alternative Manager zur Verfügung. Aber der npm-Paketmanager ist die Standardauswahl und wird hier empfohlen. Sie werden npm w?hrend der Entwicklung eines Projekts wiederholt verwenden, wenn Sie feststellen, dass die Notwendigkeit besteht, zus?tzliche Komponenten einzubinden.
Um einen kleinen Sprung nach vorn zu machen: Sobald der npm-Paketmanager und seine Laufzeitumgebung installiert sind, k?nnen Sie damit ein ?my-package“-Paket in Ihrem Projekt installieren. Sie tun dies, indem Sie in einer VSCode-Terminalsitzung einen Befehl wie ?npm create my-package“ starten. Dadurch werden die ?my-package“-Bibliotheksdateien in den Node-Module-Ordner Ihres Projekts heruntergeladen.
Aber es gibt einen Haken: npm erfordert eine ?Node.js-Laufzeitumgebung“. Daher muss dies auch installiert werden.
Die gute Nachricht ist, dass Node.js zumindest für Windows-Benutzer durch Herunterladen und ?ffnen einer Standard-MSI-Datei (Microsoft Installation) installiert wird. Noch besser ist, dass Sie mit dem so gestarteten Installationsvorgang auch npm installieren k?nnen.
Allerdings ist die Durchführung des Verfahrens für einen Anf?nger eine ziemliche Herausforderung. Die grundlegende Download-Anordnung ist unter https://nodejs.org/en unter ?Run JavaScript Everywhere“ dokumentiert, enth?lt jedoch nur sehr wenige Bedienungsanleitungen. Es k?nnte hilfreich sein, die detaillierteren Anweisungen unter ?So installieren Sie Node.js und NPM unter Windows“ zu lesen. Nehmen Sie sich Zeit dafür. Wenn etwas schief geht, müssen Sie Node.js nur deinstallieren und von vorne beginnen. Der beste Rat, den ich Ihnen geben kann, ist, die vom Verfahren angebotenen Standardeinstellungen zu verwenden – überschreibungen sind ausschlie?lich Experten vorbehalten.
2.5 SvelteKit installieren
Endlich sind Sie in der Lage, Fortschritte zu machen! Wenn Sie diese Phase abschlie?en, werden Sie mit einer einfachen Demo-SvelteKit-Seite belohnt, die in Ihrem Browser ausgeführt wird.
- ?ffnen Sie wie zuvor eine Terminalsitzung in VSCode für Ihr Projekt und führen Sie den folgenden npx-Befehl aus:
npx sv create
*Nebenbei bemerkt ist npx ein ?Package Runner“-Tool, das in npm eingebettet ist – es wird automatisch mit npm installiert
Ab November 2024 wird dadurch ein SvelteKit-Dialog gestartet, der Sie durch ein Verfahren zur Konfiguration Ihres Projekts mit Svelte 5 führt.
Abgesehen davon k?nnen Sie sicher sein, dass Sie, wenn bei diesem Vorgang etwas schief geht und Sie von vorne beginnen m?chten, nur den gesamten Inhalt Ihres Projektordners l?schen und es erneut versuchen müssen. Beachten Sie auch, dass bei npm-Installationen oft besorgniserregende Listen mit Warnmeldungen angezeigt werden, w?hrend sie nach m?glichen Inkompatibilit?ten in den Dateien suchen, die sie in Ihr Projekt einbauen. Es ist sehr unwahrscheinlich, dass diese für Sie als Anf?nger relevant sind, daher empfehle ich Ihnen, sie einfach zu ignorieren.
Sveltes erste Frage lautet: ?Wo sollen wir Ihr Projekt erstellen?“. Da Ihre Terminalsitzung bereits in Ihrem Projektordner ge?ffnet ist, k?nnen Sie hier einfach die Eingabetaste drücken.
Jetzt m?chte Svelte wissen, welchen Projektstil es erstellen soll. Ich m?chte, dass Sie hier ?Minimal“ ausw?hlen. Das Verfahren dazu ist in einer Terminalsitzung etwas umst?ndlich, da Sie ein Kontrollk?stchen nicht wie auf einer Webseite mit der Maus umschalten k?nnen. Hier geben Sie Ihre Pr?ferenz an, indem Sie sich mit der Pfeil-nach-unten-Taste auf der ?Minimal“-Zeile positionieren und dann die Eingabetaste drücken
Jetzt m?chte Svelte wissen, ob Sie die TypeScript-Prüffunktionen verwenden m?chten. Diese erweiterte Javascript-Erweiterung ist für Sie von entscheidender Bedeutung, wenn Sie an einer komplexen Webanwendung in Produktionsqualit?t arbeiten (sie überwacht Ihre Verwendung von Variablentypen in Javascript und sorgt für Konsistenz). Aber das brauchen Sie hier nicht und Ihre Lernkurve wird bereits exponentiell, daher empfehle ich Ihnen, ?Nein“ auszuw?hlen, indem Sie zweimal den Abw?rtspfeil drücken und dann die Eingabetaste drücken.
Dann fragt sich Svelte, ob Sie ?zus?tzliche Optionen“ hinzufügen m?chten. Das ESLint-Syntaxprüfungstool, das oben in der Liste angezeigt wird, kann hilfreich sein. Dies kann manchmal ein ?lautes“ ?rgernis sein und Sie vor Problemen warnen, die Sie nicht besonders interessieren. Insgesamt empfehle ich Ihnen jedoch, dies hier zu akzeptieren, indem Sie die Leertaste und die Eingabetaste drücken.
Abschlie?end fragt Svelte, welchen Paketmanager Sie verwenden m?chten. W?hlen Sie npm
Sie k?nnen wahrscheinlich alle anderen angebotenen Optionen getrost ignorieren.
Svelte ist jetzt bereit, Ihr Projekt umzusetzen. Auf Anfrage geben Sie grünes Licht, indem Sie den folgenden Befehl in Ihre Terminalsitzung eingeben:
npx sv create
Die seltsame Anzeige, die Sie jetzt auf Ihrem Bildschirm sehen, ist m?glicherweise Ihr erster Blick darauf, wie npm Paketdateien in ein Projekt herunterl?dt. Es k?nnte für Sie aufschlussreich sein, zu bemerken, dass der Ordner ?svelte-dev“ in Ihrem Arbeitsbereichsfenster pl?tzlich mit einer beeindruckenden Anzeige des Unterordnerinhalts aufblüht. Dies ist der Code, der Ihr ?minimales“ SvelteKit-Projekt darstellt.
Es ist nicht immer so, dass Paketsoftware in Ihrem Projekt landet. Wenn Sie ein Tool installieren, das für die gemeinsame Nutzung mit anderen Projekten nützlich sein k?nnte, k?nnen Sie eine ?globale“ Installation anfordern. Dies erreichen Sie, indem Sie Ihrem npm-Befehl ein ?Flag-Feld“ ?-g“ hinzufügen. Sie werden Flag-Felder sehen, die h?ufig in Terminalbefehlen verwendet werden. überlassen Sie es jedoch vorerst Ihrer Installationssoftware, Ihnen Anleitungen zu deren Verwendung zu geben. Bitten Sie chatGPT, Ihnen irgendwann ein Tutorial dazu zu geben.
Das Svelte-Installationsprogramm fordert Sie nun auf, npm run dev -- --open auszuführen. Probieren Sie es aus:
npm install
Dadurch wird der lokale SvelteKit-Server gestartet und Ihr Projekt darin ausgeführt. Der lokale Server hat die Aufgabe, ?localhost“-Seiten auf Port 5173 in Ihrem Browser zu erstellen. Wenn dieser Satz für Sie keinen Sinn ergibt, werden Sie jetzt sehen, was er bedeutet, denn das ?-- --open“-Bit des npm-Befehls übergibt die Kontrolle automatisch an Ihren Browser und gibt Ihnen eine Demonstration. Ihr Bildschirm sollte in etwa wie im Bild unten aussehen:
Dies ist eine Webanwendung, die mit genau der gleichen Art von HTML codiert ist, die Sie in Beitrag 1.1 gesehen haben. Der Unterschied besteht darin, dass sein Inhalt vom SVelteKit-Framework überwacht wird. Der Code befindet sich derzeit in Ihrem neuen VSCode svelte-dev-Projekt. Suchen wir das Bit, das das ?Willkommen bei SvelteKit“-Banner auf Ihrem Browserbildschirm anzeigt, ?ndern Sie es und sehen Sie, was passiert.
Zurück in VSCode, w?hrend Ihr Projekt in seinem ?Arbeitsbereich“ sichtbar ist, verwenden Sie seine Ordner-/Dateihierarchie, um durch seinen Inhalt genau so zu navigieren, wie Sie es im Windows Explorer tun würden. Sie werden feststellen, dass das Projekt eine ziemlich beeindruckende Codesammlung erworben hat! Beispielsweise gibt es jetzt einen Ordner ?node_modules“, der mit winzigen Dateien gefüllt ist. Hierhin gingen alle Dateien, die Sie w?hrend Ihrer npm-Installationsarbeit heruntergeladen haben. Suchen Sie nun die Datei page.svelte im Ordner src/routes und klicken Sie darauf. (Die Bedeutung seines Namens und seiner Position im src-Ordner wird in zukünftigen Beitr?gen gekl?rt – sagen wir einfach vorerst, dass der Name ?page.svelte“ ziemlich wichtig ist). Sie sehen nun den Inhalt von src/routes/page.svelte im VSCode-Bearbeitungsfenster auf der rechten Seite des Bildschirms. Das
Willkommen bei SvelteKit
Die Zeile hier sollte Ihnen bekannt vorkommen – ja, das ist der Teil des HTML-Codes, der die überschrift anzeigt. ?ndern Sie nun die Zeile inHello there
Speichern Sie die Datei (mit der üblichen Strg-S-Tastenkombination) und sehen Sie sich Ihren Browser erneut an. Wow, die ?Willkommen bei SvelteKit“-Nachricht wurde durch Ihre ?Hallo“-Nachricht ersetzt.Da der SvelteKit-Server, den Sie mit npm run dev gestartet haben, Ihren Projektordner überwacht, übertr?gt der Server die ?nderungen automatisch an die aktive Anwendung im Browser, wenn Sie eine Datei ?ndern.
Damit wird die Entwicklung so viel Spa? machen!
3. Zusammenfassung
Wenn Sie diesen Beitrag überlebt haben, geben Sie sich einen goldenen Stern. Sie haben es geschafft, eine SvelteKit-Webanwendung im Entwicklungsmodus zum Laufen zu bringen, und, was ebenso wichtig ist, Sie haben das VSCode-, npm- und Node.js-?Gerüst“ erstellt, das jedem zukünftigen SvelteKit-Projekt einen fliegenden Start erm?glichen wird.
Der n?chste Beitrag dieser Reihe zeigt Ihnen, wie Sie Javascript und die ?Sprache“ Svelte verwenden, um Ihrer Webanwendung Intelligenz zu verleihen.
Nachtrag 1: Wenn etwas schief geht
Es ist nicht schwer, mit diesem Zeug durcheinander zu kommen – die erfahrensten Entwickler vertippen sich manchmal beim Namen eines HTML-Tags und überfluten ihren Bildschirm mit furchteinfl??enden Fehlermeldungen. Der Unterschied besteht darin, dass sie alles schon einmal gesehen haben und wissen, dass sie nicht in Panik geraten dürfen! Wenn Sie als Anf?nger so etwas sehen, denken Sie wahrscheinlich, Sie h?tten Ihren Computer v?llig kaputt gemacht und müssten sich jetzt einen neuen kaufen. Beruhige dich. Sie k?nnen dies sortieren.
Fehler werden auf viele verschiedene Arten gemeldet. Syntaxfehler in einer in VSCode ge?ffneten .js-Datei (Javascript) werden im Bearbeitungsfenster gekennzeichnet. Im folgenden Beispiel habe ich den HTML-Code für die Header-Nachricht in einem ?minimalen“ Projekt absichtlich lahmgelegt, indem ich das schlie?ende > des anf?nglichen
Etikett.
Beachten Sie Folgendes:
- Die fehlerhafte Datei und ihre übergeordneten Ordner wurden in der Ordnerhierarchie alle rot hervorgehoben. Das bedeutet, dass der Code fehlerhaft ist und eine Fehlermeldung ausgibt, wenn Sie ihn ausführen. Probieren Sie es aus – Sie werden feststellen, dass auf der Localhost-Seite für Ihre Webanwendung beim Aktualisieren ein ?500 Internal Error“ angezeigt wird. Zurück in Ihrem VSCode-Terminalfenster wurden vom SvelteKit-Server auch zahlreiche Fehlerdetails generiert, als Sie die fehlerhafte Datei gespeichert haben.
- Die Position des ?Fehlers“ wurde im Bearbeitungsfenster unterstrichen. Wenn Sie mit der Maus darüber fahren, erhalten Sie einen Tooltip mit Fehlerdetails
- Eine ?Anzahl“ der Gesamtzahl der Fehler und Warnungen in Ihrem Svelte-Dev-Projekt wird in der blauen ?Status“-Leiste unten auf der VSCode-Seite angezeigt.
Das ist ein perfektes Beispiel dafür, warum man cool bleiben muss. Hinter all diesem Chaos steckt ein v?llig trivialer Fehler
Erstens werden Sie sehen, dass das nicht alles zusammenpasst. Das System hebt das abschlie?ende f?lschlicherweise hervor. Tag als Fehlerquelle. Das eigentliche Problem liegt in der kaputten ?ffnung
Etikett. Wenn Sie das ein paar Mal gesehen haben, werden Sie automatisch denken: ?Oh, mit dem Tag-Muster stimmt etwas nicht.“ Lernen Sie, locker zu bleiben. Zumindest hat das System die richtige Zeile erkannt.
Meine allgemeine Vorgehensweise ist, dass ich, wenn etwas mit meinem Code schief geht, damit beginne, alle vom Editor hervorgehobenen Probleme zu beheben. Aber es wird Zeiten geben, in denen VSCode vollkommen zufrieden ist, Ihr Browser jedoch einen Fehler anzeigt. In diesem Fall müssen Sie sich die Fehlermeldungen ansehen, die in Ihrer Terminalsitzung angezeigt werden. Diese Fehler werden schwerwiegender sein und ich rate Ihnen, tief durchzuatmen, die Nachrichten genau zu lesen und zu überlegen, was sie Ihnen sagen wollen. Wenn Sie immer noch nicht weiterkommen, fügen Sie die Fehlermeldung in chatGPT ein und fragen Sie um Rat. Google-Suchanfragen, die Stackoverflow zitieren, sind ebenfalls eine gute Ressource.
Wenn Sie immer noch nicht weiterkommen, machen Sie eine Pause, gehen Sie spazieren und schnappen Sie sich etwas frische Luft. Das kann einen gro?en Unterschied machen. Das Tolle an der Informatik ist, dass es immer einen Grund gibt, wenn etwas schief geht. Noch besser: Wenn Sie den Grund finden und beheben, bleibt er behoben. Sch?tzen Sie sich glücklich – Sie k?nnten versuchen, ein Problem zu l?sen, an dem Menschen beteiligt sind, bei dem genau das Gegenteil der Fall ist! Mut, mein Mutiger. Sie werden dieses Codierungsproblem mit Sicherheit finden und beheben. Nachtrag 2: Arbeiten mit VSCode
Das VSCode-Bearbeitungsfeld wirkt m?glicherweise etwas eingeschr?nkt, wenn der VSCode auch das Explorer-Bedienfeld anzeigt. Vielleicht m?chten Sie wissen, dass Sie das Explorer-Bedienfeld ein- und ausschalten k?nnen, indem Sie auf das Explorer-Symbol oben links in der Symbolleistenspalte klicken.
Denken Sie auch daran, dass Sie dies schnell mit der Tastenkombination ?Strg“ ausschalten k?nnen, wenn das Bearbeitungsfeld von einer Terminalsitzung überlagert wird.
Abschlie?end wird es für Sie hilfreich sein zu wissen, dass mehrere Terminalfenster gleichzeitig aktiv sein k?nnen. In diesem Fall wird in der Menüleiste des Terminalfensters eine Liste der aktiven Terminals angezeigt und Sie k?nnen zwischen diesen durch Klicken auf Listeneintr?ge wechseln. Mit einem ?Mülleimer“-Symbol k?nnen Sie hier auch ein Fenster schlie?en, obwohl dies m?glicherweise nur sichtbar ist, wenn Sie das Terminalfenster gro? genug gemacht haben – Platz ist in VSCode immer knapp.
Das obige ist der detaillierte Inhalt vonNgSysV.Installieren von Sveltekit und Erstellen einer einfachen reinen HTML-Webanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Es gibt drei g?ngige M?glichkeiten, HTTP-Anforderungen in Node.js zu initiieren: Verwenden Sie integrierte Module, Axios und Knotenfetch. 1. Verwenden Sie das integrierte HTTP/HTTPS-Modul ohne Abh?ngigkeiten, das für grundlegende Szenarien geeignet ist, jedoch eine manuelle Verarbeitung von Datengen?hten und Fehlerüberwachung erfordert, z. 2.Axios ist eine auf Versprechen basierende Bibliothek von Drittanbietern. Es verfügt über eine kurze Syntax und leistungsstarke Funktionen, unterstützt Async/Auseait, automatische JSON -Konvertierung, Interceptor usw. Es wird empfohlen, asynchrone Anforderungsvorg?nge zu vereinfachen. 3.Node-Fetch bietet einen Stil ?hnlich dem Browser-Abruf, basierend auf Versprechen und einfacher Syntax

JavaScript -Datentypen sind in primitive Typen und Referenztypen unterteilt. Zu den primitiven Typen geh?ren String, Anzahl, Boolesche, Null, undefiniertes und Symbol. Die Werte sind unver?nderlich und Kopien werden bei der Zuweisung von Werten kopiert, sodass sie sich nicht gegenseitig beeinflussen. Referenztypen wie Objekte, Arrays und Funktionen speichern Speicheradressen, und Variablen, die auf dasselbe Objekt zeigen, wirkt sich gegenseitig aus. Typeof und Instanz k?nnen verwendet werden, um die Typen zu bestimmen, aber auf die historischen Probleme der TypeOfnull zu achten. Das Verst?ndnis dieser beiden Arten von Unterschieden kann dazu beitragen, einen stabileren und zuverl?ssigeren Code zu schreiben.

Hallo, JavaScript -Entwickler! Willkommen in den JavaScript -Nachrichten dieser Woche! Diese Woche konzentrieren wir uns auf: Oracas Markenstreit mit Deno, neue JavaScript -Zeitobjekte werden von Browsern, Google Chrome -Updates und einigen leistungsstarken Entwickler -Tools unterstützt. Fangen wir an! Der Markenstreit von Oracle mit dem Versuch von Deno Oracle, ein "JavaScript" -Marke zu registrieren, hat Kontroversen verursacht. Ryan Dahl, der Sch?pfer von Node.js und Deno, hat eine Petition zur Absage der Marke eingereicht, und er glaubt, dass JavaScript ein offener Standard ist und nicht von Oracle verwendet werden sollte

Versprechen ist der Kernmechanismus für den Umgang mit asynchronen Operationen in JavaScript. Das Verst?ndnis von Kettenanrufen, Fehlerbehebung und Kombination ist der Schlüssel zum Beherrschen ihrer Anwendungen. 1. Der Kettenaufruf gibt ein neues Versprechen durch .then () zurück, um asynchrone Prozessverkampferung zu realisieren. Jeder. Dann () erh?lt das vorherige Ergebnis und kann einen Wert oder ein Versprechen zurückgeben; 2. Die Fehlerbehandlung sollte .Catch () verwenden, um Ausnahmen zu fangen, um stille Ausf?lle zu vermeiden, und den Standardwert im Fang zurückgeben, um den Prozess fortzusetzen. 3. Combinatoren wie Promise.All () (erfolgreich erfolgreich erfolgreich nach allen Erfolg), Versprechen.Race () (Die erste Fertigstellung wird zurückgegeben) und Versprechen.Allsettled () (Warten auf alle Fertigstellungen)

Cacheapi ist ein Tool, das der Browser zur Cache -Netzwerkanfragen bereitstellt, das h?ufig in Verbindung mit dem Servicearbeiter verwendet wird, um die Leistung der Website und die Offline -Erfahrung zu verbessern. 1. Es erm?glicht Entwicklern, Ressourcen wie Skripte, Stilbl?tter, Bilder usw. Zu speichern; 2. Es kann die Cache -Antworten entsprechend den Anfragen übereinstimmen. 3. Es unterstützt das L?schen bestimmter Caches oder das L?schen des gesamten Cache. 4.. Es kann Cache -Priorit?ts- oder Netzwerkpriorit?tsstrategien durch Servicearbeiter implementieren, die sich auf Fetch -Ereignisse anh?ren. 5. Es wird h?ufig für die Offline -Unterstützung verwendet, die wiederholte Zugriffsgeschwindigkeit, die Vorspannungs -Schlüsselressourcen und den Inhalt des Hintergrundaktualisierungss beschleunigen. 6. Wenn Sie es verwenden, müssen Sie auf die Cache -Versionskontrolle, Speicherbeschr?nkungen und den Unterschied zum HTTP -Caching -Mechanismus achten.

Die Ereignisschleife von JavaScript verwaltet asynchrone Vorg?nge, indem sie Call -Stapel, Webapis und Task -Warteschlangen koordinieren. 1. Der Anrufstack führt synchronen Code aus, und wenn er auf asynchrone Aufgaben begegnet, wird er zur Verarbeitung an Webapi übergeben. 2. Nachdem das Webapi die Aufgabe im Hintergrund abgeschlossen hat, wird der Rückruf in die entsprechende Warteschlange (Makroaufgabe oder Micro -Aufgabe) eingebaut. 3. Die Ereignisschleife prüft, ob der Anrufstapel leer ist. Wenn es leer ist, wird der Rückruf aus der Warteschlange herausgenommen und zur Ausführung in den Anrufstapel geschoben. V. 5. Das Verst?ndnis der Ereignisschleife hilft zu vermeiden, den Haupt -Thread zu blockieren und die Codeausführungsreihenfolge zu optimieren.

Ereignisblasen verbreiten sich vom Zielelement nach au?en zum Vorfahrknoten aus, w?hrend Ereignisfassungen sich von der ?u?eren Schicht nach innen zum Zielelement ausbreiten. 1. Ereignisblasen: Nach dem Klicken auf das untergeordnete Element l?st das Ereignis den H?rer des übergeordneten Elements nach oben aus. Nach dem Klicken auf die Schaltfl?che gibt es beispielsweise zuerst die untergeordnete und dann entzündete Eltern aus. 2. Ereigniserfassung: Stellen Sie den dritten Parameter auf True ein, so dass der H?rer in der Erfassungsstufe ausgeführt wird, z. B. das Ausl?sen des Capture -Listeners des übergeordneten Elements, bevor Sie auf die Schaltfl?che klicken. 3. Praktische Verwendungszwecke umfassen ein einheitliches Management von Ereignissen für Kinderelemente, Vorverarbeitung und Leistungsoptimierung von Abfangen. V.

In JavaScript -Arrays gibt es zus?tzlich zu MAP und Filter andere leistungsstarke und selten verwendete Methoden. 1. Reduzierung kann nicht nur summieren, sondern auch z?hlen, gruppen, flach Arrays ab und bauen neue Strukturen auf. 2. FindingIndex werden verwendet, um einzelne Elemente oder Indizes zu finden. 3. Einige und alles werden verwendet, um festzustellen, ob Bedingungen bestehen oder sich alle treffen. 4. SORT kann sortiert werden, wechselt aber das ursprüngliche Array. 5. Achten Sie darauf, das Array zu kopieren, wenn Sie es verwenden, um Nebenwirkungen zu vermeiden. Diese Methoden machen den Code pr?gnanter und effizienter.
