So richten Sie vue2 auf der Jingdong M-Station ein

Jingdong M Station hat die Vue2-Technologie übernommen und sein Framework und seine Anwendungen wurden ebenfalls umfassend optimiert, um die Website-Leistung zu verbessern. In der Vue2-Entwicklungsumgebung sind einige Einstellungen erforderlich, um eine bessere Entwicklungsarbeit zu ermöglichen. In diesem Artikel wird die Einstellungsmethode von Vue2 auf der Jingdong M-Station ausführlich erläutert, um Entwicklern einen schnellen Einstieg zu erleichtern.

1. Umgebungsinstallation

1. Node.js installieren

Node.js ist ein Server, der speziell für A. entwickelt wurde High-End-JavaScript-Laufzeitumgebung, mit der sich schnell skalierbare Webanwendungen entwickeln lassen. Zuerst müssen wir Node.js installieren. Die spezifischen Schritte sind wie folgt:

(1) Rufen Sie die offizielle Website auf: https://nodejs.org und wählen Sie dann die ausführbare Datei von Node.js aus Passt sich an Ihre Computerumgebung an und lädt es herunter. Anschließend installieren Sie es.

(2) Öffnen Sie nach Abschluss der Installation das Terminal und geben Sie den Befehl node -v ein. Wenn die Versionsnummer angezeigt wird, ist die Installation erfolgreich.

2. Vue.js installieren

Vue.js ist ein leichtes JavaScript-Framework zum Erstellen von Benutzeroberflächen, das die Entwicklungseffizienz schnell verbessern kann. Bei der Installation von Vue.js müssen Sie das Vue-cli-Gerüsttool installieren. Die spezifischen Schritte sind wie folgt:

(1) Installieren Sie Vue-cli global:

npm install -g vue-cli

(2) Erstellen Sie ein neues Projekt basierend auf der Webpack-Vorlage:

vue init webpack my-project

(3) Geben Sie das Projektverzeichnis ein und installieren Sie Abhängigkeiten:

cd my-project
npm install

(4) Starten Sie den Entwicklungsmodus: #🎜 🎜#

npm run dev

#🎜🎜 #(5) Öffnen Sie http://localhost:8080 im Browser und Sie können sehen, dass die Vue.js-Anwendung bereits lokal ausgeführt wird.

2. Konfigurationsdatei

Verwenden Sie in Vue.js das Vue.config-Objekt, um einige globale Konfigurationen festzulegen. Im Folgenden sind einige notwendige Konfigurationselemente als Referenz aufgeführt:

ProductionTip

1. wird verwendet, um zu steuern, ob Vue.js beim Starten der Produktion in der Konsole ausgegeben wird Tipps. Wenn Sie den Wert auf „false“ setzen, werden alle Produktionsaufforderungen deaktiviert und die Konsolenausgabe vor der Veröffentlichung gelöscht. Der spezifische Code lautet wie folgt:

Vue.config.productionTip = false;

devtools

2. wird verwendet, um zu steuern, ob Vue.js Debugging-Tools beim Start Zugriff auf die Schnittstelle ermöglicht . Wenn Sie den Wert auf „false“ setzen, werden die Vue.js-Debugging-Tools deaktiviert, die normalerweise in Produktionsumgebungen verwendet werden. Der spezifische Code lautet wie folgt:

Vue.config.devtools = false;

3. VUEX-Einstellungen

VUEX ist das Statusverwaltungsframework von Vue.js, mit dem eine globale Datenstatussammlung verwaltet werden kann . In der Vue.js-Entwicklung umfasst VUEX die folgenden Konfigurationen:

state

1. Der Zustandsbaum der Vue.js-Anwendung, bestehend aus Objekten Zusammensetzung. In VUEX ist der Zustand reaktiv, und wenn er sich ändert, ändern sich auch die zugehörigen Komponenten. Der spezifische Code lautet wie folgt:

const store = new Vuex.Store({
    state: {
        count: 0
    }
});

getters

2. kann für berechnete Eigenschaften in Vue.js verwendet werden, und berechnete Eigenschaften können verwendet werden zum Caching. Zum Beispiel: Erhalten eines bestimmten Status, Berechnen des Status usw. Der spezifische Code lautet wie folgt:

const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        count: state => {
            return state.count
        }
    }
});

mutations

3. Die einzige Möglichkeit, den Geschäftsstatus zu ändern, besteht darin, den Geschäftsstatus nicht außerhalb von zu ändern Mutationen, andernfalls wird der Verlauf der Statusänderungen nicht aufgezeichnet. Der spezifische Code lautet wie folgt:

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, payload) {
            state.count += payload.amount
        }
    }
});

actions

4. Asynchrone Operationssammlung, die zum asynchronen Ausführen von Mutationen verwendet wird. Ändern Sie stattdessen den Speicherstatus nicht direkt in Aktionen. Der spezifische Code lautet wie folgt:

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, payload) {
            state.count += payload.amount
        }
    },
    actions: {
        increment(context, payload) {
            context.commit('increment', payload)
        }
    }
});

Oben sind einige Einstellungsmethoden für Vue2 auf der Jingdong M-Station aufgeführt, einschließlich Umgebungsinstallation, Konfigurationsdateien, VUEX-Einstellungen usw. Ich hoffe, dieser Artikel hat den Vue.js-Entwicklern etwas geholfen und es jedem ermöglicht, die Vue.js-Technologie besser für die Entwicklung anzuwenden.

Das obige ist der detaillierte Inhalt vonSo richten Sie vue2 auf der Jingdong M-Station ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!