Inhaltsverzeichnis
2. Erstellen Sie die vue-Umgebung
1. Installieren Sie das Modulpaket @vue/cli global
3. Prüfen Sie, ob die Installation erfolgreich war
3. Erstellen Sie ein vue-Projekt
2. Wählen Sie den Vorlagen- und Paketmanager aus und warten Sie, bis das Projekt erstellt wurde
4. Starten Sie das vue-Projekt
2. Durchsuchen Sie die Projektseite
Fünftens die Bedeutung und Funktion der vue-Projektverzeichnisdatei
7. Bereinigen Sie die Begrüßungsschnittstelle
Ergänzung: Solution App.vue Code ist schwarz auf weiß
1. Installieren Sie node.js
1. Laden Sie node.js herunter
Download-Link: Download | Node.js (nodejs.org)
2. Installation
3. Prüfen Sie, ob die Installation erfolgreich war
Öffnen Sie das cmd-Fenster, um zu prüfen, ob die Installation erfolgreich war: node -v (wird die Versionsnummer angezeigt, war die Installation erfolgreich)
2. Erstellen Sie die vue-Umgebung
1. Installieren Sie das Modulpaket @vue/cli global
Offizielle Vue-Website: https://cn.vuejs.org/
2. Führen Sie den Befehl aus
Wechseln Sie zum Alibaba Cloud-Spiegel
npm-Konfigurationssatzregistrierung https://registry.npm.taobao.org
installiere @vue/cli -g
npm install -g @vue/cli
3. Prüfen Sie, ob die Installation erfolgreich war
vue-V
3. Erstellen Sie ein vue-Projekt
1. Erstellen Sie ein Projekt
Wählen Sie einen Ordner aus, in dem Sie ein Projekt erstellen möchten, öffnen Sie das Bedienterminal und führen Sie den folgenden Befehl aus
vue Projektname erstellen
Hinweis: Der Projektname darf keine Großbuchstaben, Chinesisch und Sonderzeichen enthalten
2. Wählen Sie den Vorlagen- und Paketmanager aus und warten Sie, bis das Projekt erstellt wurde
(Die blaue Schrift zeigt die aktuell ausgewählte an, drücken Sie die Auf- und Ab-Tasten auf der Tastatur, um sie auszuwählen)
Warten Sie nach Auswahl der Vorlage, bis das Projekt erstellt wurde
4. Starten Sie das vue-Projekt
1. Führen Sie den Befehl aus
Nachdem das Projekt erstellt wurde, sieht die Steuerungsseite wie in der Abbildung oben aus. Zu diesem Zeitpunkt müssen wir nur die relevanten Befehle gemäß dem Eingabeaufforderungsinhalt in der Abbildung oben ausführen.
cd Projektname // Geben Sie das Dateiverzeichnis des Projekts ein
npm run serve // Startet den integrierten Webback-Local-Hot-Update-Entwicklungsserver
2. Durchsuchen Sie die Projektseite
Nach dem Ausführen des obigen Befehls zum Starten des Projekts sieht die Konsolenseite folgendermaßen aus:
Wenn der Browser nicht automatisch erscheint, kopieren Sie den Domänennamen und den Port manuell und geben Sie die Eingabeaufforderung ein. Greifen Sie in Ihrem Browser darauf zu
Fünftens die Bedeutung und Funktion der vue-Projektverzeichnisdatei
6. Ändern Sie die Portnummer
Es gibt keine webpack.config.js-Datei im Projekt, da die vue.config.js vom vue-Gerüstbauprojekt verwendet wird.
Erstellen Sie eine neue vue.config.js im parallelen Verzeichnis src, füllen Sie die folgende Konfiguration aus und starten Sie schließlich den Server neu, um die Portnummer zu ändern
module.exports = {
devServer: { // 自定义服务配置
port: 3000, // 修改的端口号
open: true
}
7. Bereinigen Sie die Begrüßungsschnittstelle
Für unsere eigene Entwicklung gibt es viele unnötige Dateien im neuen vue-Projektverzeichnis, die direkt bereinigt werden können
Löschen Sie alles unter den Ordnern „assts“ und „components“ (verlassen Sie die Standard-Willkommensseite nicht).
src/App.vue hat standardmäßig viele Inhalte, Sie können sie alle löschen und die Vorlagen-, Skript- und Stilfelder verlassen
Ergänzung: Solution App.vue Code ist schwarz auf weiß
Laden Sie einfach ein Vetur-Plugin herunter
Nach der Installation von vetur kann der Code farbig dargestellt werden, außerdem können Sie eine Vielzahl von Shortcut-Befehlen verwenden: Geben Sie beispielsweise in der .vue-Datei direkt den Befehl vue ein, und Sie können direkt die Template-, Script- und Style-Boxen öffnen .
