So verwenden Sie vue-cli, um ein Projekt zu erstellen und es mit webpack zu verpacken

1. Bereiten Sie die Umgebung vor (laden Sie nodejs herunter und legen Sie Umgebungsvariablen fest)
2. Installieren Sie vue-cli global und geben Sie den vue-Befehl ein, um ein vue-Projekt zu erstellen

npm install -g @vue/cli

Über alte Versionen
Der Paketname von Vue CLI wurde von vue-cli in @vue/cli geändert. Wenn Sie eine ältere Version von vue-cli (1.x oder 2.x) global installiert haben, müssen Sie diese zuerst über npm uninstall vue-cli -g oder yarn global remove vue-cli deinstallieren.

3. Erstellen Sie ein neues Projekt basierend auf der Webpack-Vorlage (erstellen Sie zuerst einen neuen Projektordner und öffnen Sie die Befehlszeile am Speicherort).

vue init webpack mein-projekt

4. Standardkonfiguration durchführen

# Hier sind einige Konfigurationen erforderlich, drücken Sie einfach standardmäßig die Eingabetaste. Dadurch wird die Vue 2.x-Version der Vorlage installiert.

Für Vue 1.x verwenden Sie: vue init webpack#1.0 my-project
# Konfiguration starten? Projektname my-project
? Projektbeschreibung Ein Vue.js-Projekt
? Autor runoob <[email protected]>
? Vue-Standalone erstellen
? ESLint zum Lintieren Ihres Codes verwenden? Ja
? Wählen Sie eine ESLint-Voreinstellung Standard
? Unit-Tests mit Karma + Mocha einrichten? Ja
? E2E-Tests mit Nightwatch einrichten? Ja
# Konfiguration beendet vue-cli · „my-project“ generiert.

   So fangen Sie an:
   
     CD Mein Projekt
     npm installieren
     npm-Ausführung dev
   
   Die Dokumentation finden Sie unter https://vuejs-templates.github.io/webpack.

5. Geben Sie das Projekt ein, installieren Sie node_modules und starten Sie das Projekt

CD Mein Projekt
npm installieren
npm-Ausführung dev

6. Verpacken Sie das Projekt und konfigurieren Sie nginx

#Paketprojekt npm run build

Nginx-Konfiguration

Arbeiterprozesse 1;

Ereignisse {
    Arbeiterverbindungen 1024;
}

http {
    mime.types einschließen;
    Standardtyp Anwendung/Oktett-Stream;
    sendfile an;
    KeepAlive-Timeout 65;

    Server {
        hören Sie 8081;
        Servername localhost;

		Standort / {
            Stammverzeichnis E:/vuework/mein-projekt/dist;
			Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
            Index Index.html Index.htm;
        }
    }
}

7. Wiederholte Verpackung, Datei nicht aktualisiert.
Verweisen Sie in der Webpack-Paketdatei im Build-Verzeichnis auf das Plug-In „clean-webpack-plugin“ und verwenden Sie es dann im Plug-In.

8. Bereitstellung: Nginx konfigurieren, Projekt verpacken und Nginx starten

npm-Ausführung erstellen
Starten Sie nginx

Dies ist das Ende dieses Artikels über die Verwendung von vue-cli zum Erstellen eines Projekts und zum Verpacken von Webpacks. Weitere verwandte Inhalte zum Verpacken von Vue-Webpacks 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!