Detaillierte Erklärung zum Kompilieren von Vue ohne Verwendung von Webpack

Bei der Verwendung von vue.js sehen wir häufig einige Vorgänge, die das Packen und Kompilieren von Webpacks erfordern, wodurch die Einführung und Verwendung von vue.js bequemer wird. Einige Entwickler ziehen es jedoch vor, vue.js direkt zu verwenden, ohne zu viel Aufwand für die Verpackung und Kompilierung aufzuwenden. Kann diese Anforderung also erfüllt werden? Die Antwort ist ja.

1. Einführung von vue.js

Ohne mit Webpack zu kompilieren, müssen wir vue.js intuitiv in unser Projekt einführen. Dies kann über CDN eingeführt werden. Wir können den folgenden Code direkt in HTML hinzufügen:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

Es ist zu beachten, dass Sie die Versionsnummer im Einführungspfad entsprechend Ihren Projektanforderungen und der Version von vue.js ändern müssen.

Dann können Sie vue.js problemlos nutzen.

2. Verwendung von Komponenten

Bei der Verwendung von vue.js können wir das Projekt durch die Definition von Komponenten in mehrere wiederverwendbare Teile aufteilen. Wir können Komponenten auch ohne Kompilierung mit Webpack verwenden.

Wir können Komponenten direkt in der HTML-Datei definieren und einführen, zum Beispiel:

<my-component></my-component>

<script>
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
  el: '#app'
})
</script>

Zu diesem Zeitpunkt haben wir eine Komponente namens my-component definiert und sie über Vue.component übergeben Registrieren Sie es. In HTML-Dateien können wir diese Komponente direkt verwenden. my-component的组件，并通过Vue.component注册它。在html文件中，我们可以直接使用这个组件。

简单来说，可以在html文件中注册和使用全局组件。

3. 单组件文件

虽然在不使用webpack编译的情况下我们可以直接在html文件中定义组件，但是当项目愈发复杂，组件数量变得众多时，这样的方式不利于维护和复用。这时候，我们可以将每个组件单独写在一个vue文件中，通过<script>标签将组件引入。

例如，一个名为hello-world.vue的组件文件：

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'world'
    }
  }
}
</script>

然后，我们可以通过以下方式来引入和使用这个组件：

  


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>


<script>
new Vue({
  el: '#app'
})

即可愉快的使用这个组件。

4. CSS样式

如果你在使用单组件文件时遇到了样式问题，套用传统的<style>标签来添加样式就好了。

例如，在hello-world.vue

Einfach ausgedrückt können globale Komponenten registriert und in HTML-Dateien verwendet werden.

Einzelne Komponentendatei🎜🎜🎜Obwohl wir Komponenten direkt in HTML-Dateien definieren können, ohne sie mit Webpack zu kompilieren, ist diese Methode nicht förderlich, wenn das Projekt komplexer wird und die Anzahl der Komponenten groß wird zur Wartung und Wiederverwendung. Zu diesem Zeitpunkt können wir jede Komponente separat in eine Vue-Datei schreiben und die Komponente über das Tag <script> einführen. 🎜🎜Zum Beispiel eine Komponentendatei mit dem Namen hello-world.vue: 🎜

<style>
div {
  color: green;
}
</style>

🎜 Dann können wir diese Komponente auf folgende Weise einführen und verwenden: 🎜rrreee🎜Sie können diese Komponente problemlos verwenden. 🎜
🎜CSS-Stile🎜🎜🎜Wenn Sie bei der Verwendung einzelner Komponentendateien auf Stilprobleme stoßen, verwenden Sie einfach das herkömmliche <style>-Tag, um Stile hinzuzufügen. 🎜🎜Zum Beispiel können wir in der Komponente hello-world.vue den folgenden Stil hinzufügen: 🎜rrreee🎜Kurz gesagt, obwohl in vielen Tutorials die Verwendung von Webpack in die Einführung einbezogen wird von vue.js, aber für Entwickler können Sie vue.js problemlos verwenden, ohne Webpack zu verwenden. 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung zum Kompilieren von Vue ohne Verwendung von Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!