So führen Sie CDN in Vue ein

Vue ist ein beliebtes JavaScript-Framework, das Entwicklern das Schreiben skalierbarer Webanwendungen erleichtert. Wenn wir Vue verwenden, können wir wählen, ob wir Vue als JavaScript-Datei in unser Projekt einführen möchten oder ob wir Vue über einen CDN-Dienst (Content Delivery Network) einführen möchten.

Wie stellt man also das CDN von Vue vor? Als Nächstes werden wir die Schritte zur Einführung von Vue mithilfe von CDN im Detail vorstellen.

1. CDN-Link zur HTML-Datei hinzufügen

Zuerst müssen wir den CDN-Link von Vue in die HTML-Datei einfügen. Wir finden den CDN-Link von Vue auf der offiziellen Website von Vue, wie unten gezeigt:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Fügen Sie den obigen Link zum Kopf- oder Körperteil der HTML-Datei hinzu und platzieren Sie ihn vor der Einführung anderer erforderlicher Dateien.

2. Vue-Instanz erstellen

Nach der Einführung des CDN von Vue müssen wir eine Vue-Instanz erstellen. Wir können eine Vue-Instanz erstellen, genau wie die Einführung einer JS-Datei, wie unten gezeigt:

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

Nach der Einführung des CDN von Vue können wir Vue verwenden, um eine Vue-Instanz zu erstellen. Im obigen Code erstellen wir eine Vue-Instanz namens app, binden sie an das Element mit der ID app in der HTML-Seite und definieren ein Attribut message in den Daten.

3. Vue-Instanz in HTML verwenden

Sobald wir die Vue-Instanz erstellt haben, können wir Vue verwenden, um Daten in der HTML-Datei zu binden. Beispielsweise können wir doppelte geschweifte Klammern verwenden, um die Daten der Vue-Instanz wie folgt zu binden:

<div id="app">
  {{ message }}
</div>

Im obigen Code binden wir die Vue-Instanz-App an das Element mit der ID-App in der HTML-Seite und verwenden doppelte geschweifte Klammern Binden Sie die Datennachricht in der Vue-Instanz.

4. Einführung anderer Vue-Komponenten CDN

Zusätzlich zu Vues eigenem CDN können wir CDN auch verwenden, um andere Vue-Komponenten und Plug-Ins wie Vue-Router und Vuex vorzustellen. Bevor wir diese Komponenten und Plug-Ins verwenden, müssen wir ihre CDN-Links in die HTML-Datei einfügen. Beispielsweise können wir den folgenden Link verwenden, um das CDN des Vue-Routers vorzustellen:

<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"></script>

Ebenso müssen wir den CDN-Link des Vue-Routers in das HTML-Dokument einfügen, bevor wir eine Vue-Router-Instanz erstellen. Wir können die Methode createRouter() verwenden, um eine Vue-Router-Instanz zu erstellen. Der folgende Code verwendet beispielsweise den Vue-Router, um grundlegende Routing-Einstellungen zu implementieren:

<script>
  const router = VueRouter.createRouter({
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  })
  const app = Vue.createApp({})
  app.use(router)
  app.mount('#app')
</script>

Im obigen Code definieren wir zwei Routen über das Routenattribut: / und /about. Anschließend verwenden wir die Methode Vue.createApp(), um eine Vue-Instanz zu erstellen, und verwenden das Vue-Router-Plugin und die Methode mount(), um die Vue-Instanz an das App-Element der HTML-Seite zu binden.

Zusammenfassung

Die Einführung des CDN von Vue ist eine sehr einfache und schnelle Möglichkeit, mit der wir Vue-Anwendungen bequemer erstellen können. Wir müssen lediglich den CDN-Link in die HTML-Datei einfügen, eine Vue-Instanz erstellen und diese dann an die HTML-Seite binden. Darüber hinaus können wir über CDN-Links auch andere Vue-Komponenten und Plugins wie Vue-Router und Vuex einbinden, um die Erstellung Vue-basierter Anwendungen zu erleichtern.

Das obige ist der detaillierte Inhalt vonSo führen Sie CDN in Vue ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!