Webpack, Vue und Node realisieren die gemeinsame Nutzung von Einzelseitencode

In diesem Artikel wird hauptsächlich Webpack + Vue + Node zum Erstellen einer einzelnen Seite vorgestellt. Es ist sehr praktisch. Freunde, die es benötigen, können darauf zurückgreifen.

1.node-Download-Adresse: http://nodejs.cn/download/, überprüfen Sie die Knoten- und NPM-Version nach Abschluss der Installation

2. Taobao Mirror: npm install cnpm -g --registry=https://registry.npm.taobao.org Sie können cnpm direkt anstelle von npm verwenden 🎜>

3. Vue-cli installieren: cnpm install -g vue-cli

Webpack installieren: cnpm install -g webpack

-g bedeutet globale Installation

Programmierungsprozess Wenn Sie ein Modul einführen müssen, können Sie cnpm install

Wenn Sie beispielsweise das Vue-Router-Routing-Modul installieren müssen, verwenden Sie einfach das Gerüst cnpm vue-router installieren --save

4. Erstellen Sie die Vue-Anwendung von Webpack: vue init webpack

Besonderes hier: Erwähnen Sie das Webpack. Bei der vorherigen Installation der Webpack-Vorlage gab es die Option, ESLint zur Standardisierung Ihres Codes zu verwenden.

ESLint ist möglicherweise eine schlechte Nachricht für Freunde Wer der Code-Einrückung nicht viel Aufmerksamkeit schenkt, ändert ihn bitte ein wenig, wenn die Einrückung nicht den Standards entspricht, oder sogar Leerzeichen eine Menge verdammter Fehler verursachen können

Geben Sie das Vue-Cli an Vorlage. Die Vue-Cli-Vorlage ist in offizielle Vorlage, benutzerdefinierte Vorlage und lokale Vorlage unterteilt.

Offizielle Vorlagen sind unterteilt in

browserify – Browserify + vueify mit erweitert Funktionen für die offizielle Entwicklung

• browserify-simple – Browserify + vueify mit Grundfunktionen für schnelle Entwicklung

• simple – Einzelnes HTML für die Entwicklung einfachste Vue.js-Anwendung

• Webpack – Webpack mit erweiterten Funktionen + Vue-Loader für formale Entwicklung

• Webpack-simple – Webpack mit Grundfunktionen + Vue-Loader für schnelle Entwicklung

• 5. Scaffolding-Installationsabhängigkeiten

6

PS: Ich habe eine Demo geschrieben, die Routing, Routing-Nesting, Sub-Routing, Remote-Cross-Domain-Datenerfassung, Bootstrap und kombiniert andere Funktionen

Der Code wurde auf meinen Github hochgeladen, Adresse: https://github.com/LeonardLmyt/learngit/tree/master/vue-single-page

Verwandte Empfehlungen:

Ein Beispiel für die Implementierung einer SPA-Einzelseitenanwendung in Vue

HTML5-Einzelseitengeste Sliding Screen Switching

Über Vue. Beispielanalyse, wie js mehrere Routingbereiche auf einer einzigen Seite betreibt

Das obige ist der detaillierte Inhalt vonWebpack, Vue und Node realisieren die gemeinsame Nutzung von Einzelseitencode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!