VUE3-Einführungs-Tutorial: Verwenden Sie den Vue-Loader, um Vue.js-Komponenten zu analysieren und zu kompilieren

Vue.js ist ein beliebtes JavaScript-Framework, das beim Erstellen moderner Webanwendungen sehr leistungsstark ist. Im Vergleich zu herkömmlichen MVC-Frameworks bietet Vue.js eine semantischere und intuitivere Möglichkeit, Benutzeroberflächen zu erstellen. Die kürzlich veröffentlichte Vue 3-Version führt viele neue Funktionen und Optimierungen ein und macht die Verwendung von Vue.js zugänglicher und flexibler.

In Vue.js sind Komponenten eines der wichtigsten abstrakten Konzepte. Jede Komponente kann ihre eigenen Vorlagen, Daten und Methoden enthalten und kann problemlos wiederverwendet werden, ohne sich um den gesamten Status der Anwendung zu kümmern. Vue.js bietet ein flexibles Komponentensystem, sodass Entwickler hochgradig anpassbare und wiederverwendbare Komponenten erstellen können. In diesem Artikel wird die Verwendung von Vue-Loader zum Parsen und Kompilieren von Vue.js-Komponenten vorgestellt.

Was ist Vue-Loader?

Vue-Loader ist ein offiziell von Vue.js gestartetes Webpack-Plug-in. Es wird zum Parsen und Kompilieren von .vue-Dateien verwendet. Seine Hauptfunktion besteht darin, HTML-, CSS- und JavaScript-Codes zu konvertieren in den .vue-Dateien konvertieren. In JavaScript-Module konvertieren, damit Webpack diese Module verarbeiten und in der endgültigen JavaScript-Datei bündeln kann.

Zu den Hauptfunktionen von Vue-Loader gehören:

• Parsen von .vue-Dateien
• Unterstützung von Präprozessoren (wie Sass und Less)
• Kompilieren von Vorlagen, Skripten und Stilen in .vue-Dateien

Installation von Vue-Loader

Um Vue-Loader verwenden zu können, müssen Sie zuerst Vue.js und Webpack installieren. Sie können diese Abhängigkeiten in der Befehlszeile mit npm installieren:

npm install vue webpack webpack-cli vue-loader vue-template-compiler -D

Nachdem die Installation abgeschlossen ist, müssen Sie das Vue-Loader-Plugin in die Webpack-Konfigurationsdatei laden. Öffnen Sie die Datei webpack.config.js und fügen Sie den folgenden Code hinzu:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
    // make sure to include the plugin!
  ]
}

Wenn Webpack nun Ihre Anwendung erstellt, analysiert und kompiliert Vue-Loader automatisch alle .vue-Dateien.

Wie Vue-Komponenten geschrieben werden

Vue-Komponenten sind die Grundbausteine, die Sie zum Erstellen von Anwendungen mit Vue.js verwenden. Wie oben erwähnt, analysiert Vue-Loader alle .vue-Dateien in JavaScript-Module. Daher müssen Sie zum Schreiben von Vue-Komponenten eine bestimmte Syntax verwenden. In diesem Artikel verwenden wir die Single File Component (SFC)-Syntax zum Schreiben von Vue-Komponenten.

SFC ist eine Syntax, die alle Vorlagen, Skripte und Stile in einer einzigen .vue-Datei bündelt. Jede SFC-Datei enthält den folgenden Inhalt:

<template>
  <!-- HTML模板 -->
</template>

<script>
export default {
  // Vue组件选项
}
</script>

<style>
/* 样式 */
</style>

Im obigen Codeausschnitt können Sie die drei wichtigen Teile der Komponente sehen: