MAC+PyCharm+Flask+Vue.js-Build-System

Konfigurieren Sie node.js+nvm+npm

Besuchen Sie die offizielle GitHub-Adresse und installieren Sie die Mac-Version von NVM gemäß der offiziellen Dokumentation. Klicken Sie hier

Es wird empfohlen, nvm zur Installation und Verwaltung von Node.js zu verwenden

cURL:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Wget:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Nachdem nvm installiert ist, starten Sie das Terminal neu und installieren Sie dann Node.js:

nvm ls-remote

Verwenden Sie den obigen Befehl, um die Version des Remote-Knotens anzuzeigen, und installieren Sie dann nach Bedarf die neueste Version von Nodejs:

nvm installieren 15.3.0

Nach Abschluss der Installation können Sie

NVM-Liste

Um die installierte NodeJS-Version anzuzeigen, verwenden Sie

nvm verwendet Versionsnummer

Um die entsprechende Version von nodejs zu verwenden.

nvm verwenden 15.3.0

Mit dem folgenden Befehl können Sie die aktuelle Knotenversion anzeigen

Knoten -v

npm-Schalter Taobao-Spiegel

Vorübergehend

Temporärer Befehl:

npm --registry https://registry.npm.taobao.org installiere express

Lang anhaltende

Per Befehl wie:

npm-Konfigurationssatzregistrierung https://registry.npm.taobao.org

Nachdem die Konfiguration abgeschlossen ist, können Sie mit dem folgenden Befehl die aktuelle Konfiguration abrufen.

npm config - Registrierung abrufen

Installieren Sie Vue.js

Hier installiere ich vue.js in meinem node.js=15.3.0.

Installieren Sie das Vue-CLI-Gerüstbautool:

npm install -g @vue-cli
npm install -g @vue/cli-init

Geben Sie nach Abschluss der Installation den folgenden Befehl ein, um zu überprüfen, ob sie erfolgreich war:

vue --version // Wenn eine Versionsnummer vorhanden ist, beweist dies, dass die Installation erfolgreich war

Installieren Sie Webpack:

npm install -g webpack

Erstellen und Ausführen eines Vue.js-Projekts

Online-Initialisierung

Geben Sie das Projektverzeichnis mit dem Befehl „cd“ ein und initialisieren Sie das Projekt anschließend mit dem folgenden Befehl (laden Sie die Vorlage herunter):

vue init webpack visProject

Geben Sie dann das Projektverzeichnis ein und installieren Sie die Projektabhängigkeiten, um das Verzeichnis „Node-Modules“ zu erhalten:

npm installieren

Offline-Modus

Da die obige Methode verwendet wird, wird sie immer in der Download-Vorlage angezeigt. Webpack wird hier als Vorlage verwendet, daher erwäge ich, zur Initialisierung die Offline-Methode zu verwenden.

Laden Sie zuerst webpack herunter. Sie können es von gitee herunterladen. Download-Link: hier klicken
Suchen Sie nach Abschluss des Downloads in den versteckten Dateien im Benutzerverzeichnis nach einem Ordner .vue-templates. Wenn nicht, erstellen Sie einen mit dem folgenden Befehl:

mkdir .vue-Vorlagen

Nachdem die Erstellung abgeschlossen ist, entpacken Sie die heruntergeladene Datei, benennen Sie sie in „webpack“ um und legen Sie den Ordner dann im Verzeichnis ab. Gehen Sie dann zurück in Ihr vorheriges Verzeichnis und geben Sie den folgenden Befehl ein, um die Offline-Initialisierung durchzuführen:

vue init webpack-Projektname --offline

Die Erstkonfiguration ist wie folgt:

Verwenden Sie nach der Initialisierung den folgenden Befehl, um die aktuelle Ausführungsumgebung zum Ordner node_modules hinzuzufügen:

npm installieren

Ausführen des Projekts

Nachdem Sie die obige Konfiguration abgeschlossen haben, rufen Sie den Projektordner mit „cd“ auf und kompilieren Sie das Projekt mit dem folgenden Befehl:

npm-Ausführung dev

Nachdem die Kompilierung abgeschlossen ist, können Sie über localhost darauf zugreifen. Die folgende Seite wird angezeigt und zeigt an, dass der Vorgang erfolgreich war.

src-Datei und ihre Funktion

Lösen Sie das Problem des Nichtöffnens

Da hier der Standardport 8080 belegt ist, können Sie ihm durch eine Änderung der Konfigurationsdatei einen neuen Port zuweisen.

Verzeichnis der Konfigurationsdatei: ~/config/index.js

Ändern Sie einfach die dem Port entsprechende Portnummer in der Dev-Kategorie in 8083.

Führen Sie anschließend eine Neukompilierung mit dem folgenden Befehl durch:

npm-Ausführung dev

Konfigurieren von Flask

Das hier verwendete IDE-Tool ist: PyCharm. Ich werde hier nicht näher auf die Einrichtung der Python-Umgebung eingehen. Im Internet gibt es viele Tutorials.

Installieren Sie Flask

Verwenden Sie den folgenden Befehl, um die Flask-Bibliothek zu installieren: Hier verwende ich Anaconda für die Paketverwaltung.

conda installiert Flask

Wenn ich hier jedoch PyCharm zum Erstellen eines neuen Projekts verwende, kann ich wie folgt direkt ein Flask-Projekt erstellen:

In diesem Fall wird Flask automatisch im ausgewählten Interpreter installiert.

Hier verwende ich Ersteres, daher muss ich Flask manuell installieren. Nach der Installation verwende ich PyCharm, um ein neues Flask-Projekt zu erstellen, wie in der Abbildung oben gezeigt. Nach Abschluss der Erstellung erhalten wir Folgendes:

Führen Sie die Datei app.py aus. Durch Zugriff auf http://127.0.0.1:5000/ erhalten wir die folgende Schnittstelle.

Dies zeigt an, dass unsere Konfiguration abgeschlossen ist. Zusammenfassend haben wir Vue und Flask jeweils konfiguriert und zeigen später, wie sie verwendet werden.

Dies ist das Ende dieses Artikels über den Systemaufbau von MAC+PyCharm+Flask+Vue.js. Weitere relevante Inhalte zum Systemaufbau von Flask Vue.js 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!