So erstellen Sie das Backend mit vue-cil

In der Webentwicklung ist es weit verbreitet, ein datengesteuertes Backend-Managementsystem aufzubauen. Die Verwendung von Vue.js und vue-cli zum Aufbau eines Backend-Managementsystems kann die Entwicklungseffizienz erheblich verbessern und die Wartbarkeit und Skalierbarkeit des Codes sicherstellen. In diesem Artikel werden einige Schritte zum Erstellen eines Backend-Verwaltungssystems basierend auf vue-cli vorgestellt.

Schritt 1: Node.js installieren

Zuerst müssen wir Node.js installieren. Laden Sie die neueste Version von Node.js für Ihr Betriebssystem unter https://nodejs.org herunter und installieren Sie sie. Nachdem die Installation abgeschlossen ist, können Sie den folgenden Befehl in die Befehlszeilenschnittstelle eingeben, um zu überprüfen, ob Node.js erfolgreich installiert wurde:

node -v

Wenn die Installation erfolgreich ist, wird Ihre Node.js-Versionsnummer angezeigt.

Schritt 2: Vue-cli-Projekt erstellen

vue-cli ist ein offiziell von Vue.js bereitgestelltes Befehlszeilentool zum schnellen Erstellen von Vue.js-Projekten. Um vue-cli zu installieren, verwenden Sie den folgenden Befehl:

npm install -g vue-cli

Nach Abschluss der Installation verwenden Sie den folgenden Befehl, um ein grundlegendes Vue.js-Projekt zu erstellen:

vue init webpack my-project

wobei mein-projekt Ihr Projektname ist. Dieser Befehl fordert Sie auf, einige Optionen wie Projektname, Beschreibung, Autor usw. zu konfigurieren. Sie können die Standardwerte verwenden oder diese entsprechend Ihren Anforderungen konfigurieren. Nach der Ausführung dieses Befehls generiert vue-cli automatisch die grundlegende Verzeichnisstruktur des Projekts.

Schritt 3: Zugehörige Abhängigkeiten installieren

Wir müssen einige Abhängigkeiten verwenden, um schnell ein datengesteuertes Backend-Verwaltungssystem aufzubauen. Im Folgenden sind einige grundlegende Abhängigkeiten aufgeführt. Sie können je nach Bedarf weitere Abhängigkeiten hinzufügen:

npm install --save vue vue-router vuex
npm install --save-dev element-ui

Unter diesen ist Vue die grundlegende Abhängigkeit, Vue-Router und Vuex werden zum Erstellen von Routing und Statusverwaltung verwendet, Element-UI ist ein Vue. Die js-basierte UI-Komponentenbibliothek bietet viele praktische Komponenten und Stile.

Schritt 4: Seite erstellen

Jetzt können wir mit der Erstellung der Seite beginnen. Erstellen Sie Vue-Einzeldateikomponenten mit der Endung .vue im Verzeichnis src/views. Jede Komponente sollte eine Seite darstellen. Beispielsweise können wir eine Komponente namens Dashboard erstellen, um Systemübersichtsinformationen anzuzeigen. In der Datei Dashboard.vue können Sie den folgenden Code hinzufügen:

<template>
  <div>
    <h1>Dashboard</h1>
    <p>Welcome to the Dashboard page</p>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}
p {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}
</style>

Der obige Code definiert eine Komponente namens Dashboard, die einen Seitentitel und einen beschreibenden Text enthält. Beachten Sie, dass die Stile einen Gültigkeitsbereich haben, was bedeutet, dass sie nur von der Komponente verwendet werden können.

Da wir vue-router zum Verwalten des Seitenroutings verwenden, müssen wir auch Routen in der Datei src/router/index.js hinzufügen:

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/views/Dashboard'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard
    }
  ]
})

Im obigen Code ordnen wir den /-Pfad der Dashboard-Komponente zu.

Schritt 5: Erstellen Sie das Layout

Das Backend-Verwaltungssystem enthält normalerweise einige gemeinsame Layoutkomponenten, wie Kopfzeile, Seitenleiste und Fußzeile. Durch das Erstellen dieser Layoutkomponenten wird nicht nur doppelter Code reduziert, sondern es wird auch ermöglicht, dass mehrere Seiten dasselbe Layout verwenden. Erstellen Sie im Verzeichnis src/layout eine Komponente mit dem Namen Default.vue, um das Standardlayout darzustellen. Die

Default.vue-Komponente sollte den folgenden Inhalt enthalten:

<template>
  <div>
    <header></header>
    <div class="wrapper">
      <aside></aside>
      <main>
        <router-view></router-view>
      </main>
    </div>
    <footer></footer>
  </div>
</template>

<script>
export default {
  name: 'Default'
}
</script>

<style scoped>
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main {
  flex-basis: 60%;
}
@media (max-width: 767px) {
  .wrapper {
    display: block;
  }
  main {
    flex-basis: 100%;
  }
}
</style>

Die Default.vue-Komponente definiert die HTML-Struktur des Layouts und verwendet die Router-View-Komponente im Haupt-Tag, um die entsprechenden Komponenten automatisch zu laden, wenn die Seite wechselt. Darüber hinaus haben wir einige CSS-Stile verwendet, um das responsive Layout der Seite zu definieren.

Fügen Sie die Default.vue-Komponente in die App.vue-Komponente ein, wie unten gezeigt:

<template>
  <div id="app">
    <default-layout></default-layout>
  </div>
</template>

<script>
import DefaultLayout from '@/layout/Default'

export default {
  name: 'App',
  components: {
    DefaultLayout
  }
}
</script>

Dann müssen wir die Datei src/main.js ändern, um sicherzustellen, dass die Vue.js-Instanz unser Routing und Layout verwendet:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

Schritte 6: Testen Sie die Anwendung

Führen Sie abschließend den folgenden Befehl aus, um das Projekt zu starten:

npm run dev

Dieser Befehl startet den Entwicklungsserver und zeigt die Anwendung im Browser an. Wenn alles in Ordnung ist, sollten Sie die Dashboard-Seite sehen können.

Zusammenfassung

Die Verwendung von vue-cli zum Aufbau eines Backend-Managementsystems ist eine schnelle Möglichkeit, eine datengesteuerte Lösung zu erstellen. Fügen Sie nach der Erstellung des Projekts die erforderlichen Abhängigkeiten und Seiten hinzu, um die Funktionen des Systems schrittweise zu verbessern. In diesem Artikel haben Sie einige der Schritte kennengelernt, die zum Erstellen eines grundlegenden Backend-Managementsystems erforderlich sind. Viel Glück bei deiner Entwicklung!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie das Backend mit vue-cil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!