Implementierung der Vue-Einzeldateikomponente

Implementierung der Vue-Einzeldateikomponente

Ich habe kürzlich über Vue gelesen. Ich habe eine Einzeldateikomponente gefunden, die ich vorher grundsätzlich übersehen hatte. Einzeldateikomponenten in Vue.js ermöglichen, den gesamten Inhalt einer Komponente in einer einzigen Datei zu definieren. Das heißt, wenn wir eine Seite oder eine Komponente bündeln möchten, kann diese Einzeldateikomponente von Vue dies tun. Auf der offiziellen Website von Vue heißt es: „In vielen Vue-Projekten verwenden wir app.component, um globale Komponenten zu definieren, und verwenden dann app.mount('#app'), um auf jeder Seite ein Containerelement anzugeben.“ Die Komponenten sind hier relativ einfach, aber dieser Ansatz funktioniert bei komplexeren Projekten nicht. Hier sind die Gründe:

  • Globale Definitionen erzwingen, dass Namen in den einzelnen Komponenten nicht wiederholt werden dürfen.
  • In Zeichenfolgenvorlagen fehlt die Syntaxhervorhebung und bei mehrzeiligem HTML ist ein hässliches \ erforderlich.
  • Keine CSS-Unterstützung bedeutet, dass bei der Komponentenbildung von HTML und JavaScript CSS auffällig weggelassen wird.
  • Kein Build-Schritt Beschränkt Sie auf HTML und ES5 JavaScript, aber nicht auf Präprozessoren wie Pug
  • (früher Jade) und Babel.

All dies kann mit Einzeldateikomponenten mit der Erweiterung .vue und unter Verwendung von Build-Tools wie webpack oder Browserify gelöst werden.
Wie erstellen Sie also eine Einzeldateikomponente in einem Vue-Projekt?

Bauen

npm install -D @vue/compiler-sfc

Geben Sie den obigen Code in der Konsole ein, dann werden ein Ordner und eine weitere JSON-Datei angezeigt. wie folgt:

Bildbeschreibung hier einfügen

Wenn wir eine Einzeldateikomponente erstellen möchten, müssen wir die Datei selbst erstellen. Gleichzeitig müssen Sie über ein gewisses Verständnis von webpack verfügen.
Beispielsweise installieren wir einige erforderliche Abhängigkeiten selbst. Zum Beispiel CSS-Loader, CSS-Vorkompilierungsprozessor und so weiter. Da das Projekt die Vue-Datei analysieren muss, ist ein Vue-Loader erforderlich.

Diese Dateien sind eigentlich einfache Versionen von Vue. Eine einfache Version der Datei hello.vue kann beispielsweise wie folgt aussehen

Bildbeschreibung hier einfügen

Daraus lässt sich erkennen: Es besteht aus drei Teilen. Der Vorlagenteil ist unverzichtbar und die anderen beiden Teile, Stil und Skript, können ignoriert werden.
Mithilfe von Script können Sie Ihr Seiten-JS perfekt in Vue integrieren und mithilfe von Style Präprozessoren prägnantere und funktionalere Komponenten erstellen. (Diese Einzeldateikomponente ist dem HTML-Dokument in der ursprünglichen Front-End-Entwicklung sehr ähnlich. Sie verfügt über ein eigenes Stil-Tag und ein eigenes Skript-Tag, aber die Präsentationsebene verwendet ein Vorlagen-Tag. Aufgrund der einfachen Methode wird eine leistungsstarke geschichtete Komponente (Inhalt/Vorlage:, Präsentation:) erstellt.

Bildbeschreibung hier einfügen

Manche Freunde möchten vielleicht verschiedene Module trennen, was in der Vue-Dokumentation als Trennung der Belange bezeichnet wird. Das spielt keine Rolle, Sie können diese Dokumente aufteilen, CSS und JS in eine andere Datei trennen und sie dann in die Komponente importieren. wie folgt:

<!-- meine-Komponente.vue -->
<Vorlage>
  <div>Dies wird vorkompiliert</div>
</Vorlage>
<script src="./meine-komponente.js"></script>
<style src="./meine-komponente.css"></style>

Das Projektverzeichnis sieht wie folgt aus:

Bildbeschreibung hier einfügen

Unter ihnen index.html

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="utf-8" />
    <title>Vue Simple Todo App mit SFC</title>
    <Link
      rel="Stilblatt"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="externes Nofollow" rel="externes Nofollow" 
    />
    <link rel="stylesheet" href="/dist/main.css" rel="externes Nofollow" rel="externes Nofollow" />
  </Kopf>
  <Text>
    <div id="app"></div>
    <script src="/dist/main.js"></script>
  </body>
</html>

Paket.json

{
    "privat": wahr,
    "Skripte": {
      "dev": "webpack-dev-server",
      "Build": "webpack --env.prod"
    },
    "Abhängigkeiten": {
      "vue": "^3.1.1"
    },
    "devAbhängigkeiten": {
      "@vue/compiler-sfc": "^3.1.1",
      "css-loader": "^3.5.2",
      "Dateilader": "^6.0.0",
      "mini-css-extrakt-plugin": "^0.9.0",
      "Stift": "^0.54.7",
      "Stift-Loader": "^3.0.2",
      "URL-Loader": "^4.1.0",
      "vue-loader": "^16.0.0-alpha.3",
      "vue-style-loader": "^4.1.2",
      "webpack": "^4.42.1",
      "webpack-cli": "^3.3.11",
      "webpack-dev-server": "^3.10.3"
    },
    "Schlüsselwörter": ["todo", "vue"],
    "Name": "Vue-Todo-List-App mit Einzeldateikomponente",
    „Beschreibung“: „Eine einfache To-Do-Listen-Anwendung, geschrieben in Vue mit Single File Component (SFC)-Unterstützung.“
  }

webpack.config.js

const path = require("Pfad");
const { VueLoaderPlugin } = erfordern("vue-loader");
const MiniCssExtractPlugin = erfordern("mini-css-extract-plugin");

modul.exports = (env = {}) => ({
  Modus: env.prod ? "Produktion" : "Entwicklung",
  devtool: env.prod ? "Quell-Map" : "billiges-Modul-Eval-Quell-Map",
  Eintrag: [
    env.prod? false: require.resolve(`webpack-dev-server/client`),
    Pfad.auflösen(__dirname, "./src/main.js")
  ].filter(Boolean),
  Ausgabe: {
    Pfad: Pfad.resolve(__dirname, "./dist"),
    öffentlicher Pfad: "/dist/"
  },
  lösen: {
    Alias: {
      // das ist technisch nicht nötig, da der Standard-`vue`-Eintrag für Bundler
      // ist ein einfacher `export * from '@vue/runtime-dom`. Allerdings mit diesem
      // zusätzlicher erneuter Export führt irgendwie dazu, dass Webpack das Modul immer ungültig macht
      // beim ersten HMR-Update und bewirkt ein Neuladen der Seite.
      vue: "@vue/runtime-dom"
    }
  },
  Modul: {
    Regeln:
      {
        Test: /\.vue$/,
        verwenden: „vue-loader“
      },
      {
        Prüfung: /\.png$/,
        verwenden: {
          Lader: "URL-Lader",
          Optionen: { Limit: 8192 }
        }
      },
      {
        Test: /\.css$/,
        verwenden: [
          {
            Lader: MiniCssExtractPlugin.loader,
            Optionen: { hmr: !env.prod }
          },
          "CSS-Loader"
        ]
      },
      {
        Test: /\.stylus$/,
        verwenden: ["vue-style-loader", "css-loader", "stylus-loader"]
      },
      {
        Test: /\.pug$/,
        Lader: „pug-plain-loader“
      }
    ]
  },
  Plugins: [
    neues VueLoaderPlugin(),
    neues MiniCssExtractPlugin({
      Dateiname: "[name].css"
    })
  ],
  devServer: {
    inline: wahr,
    heiß: wahr,
    Statistiken: "minimal",
    contentBase:__dirname,
    Overlay: wahr,
    injectClient: falsch,
    disableHostCheck: true
  }
});

test.html

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="utf-8" />
    <title>Vue Simple Todo App mit SFC</title>
    <Link
      rel="Stilblatt"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="externes Nofollow" rel="externes Nofollow" 
    />
    <link rel="stylesheet" href="/dist/main.css" rel="externes Nofollow" rel="externes Nofollow" />
  </Kopf>
  <Text>
    <div id="app222">Testseiten</div>
    <script src="/dist/main.js"></script>
  </body>
</html>

Es gibt drei Dateien im src-Ordner, App.vue main.js und TodoItem.vue

Wo: App.vue

<Vorlage>
  <div Klasse="Wrapper">
    <h1>Meine To-do-Liste</h1>
    <form @submit.prevent="addTodo">
      <input type="text" name="todo-text" v-model="newTodoText" placeholder="Neue Aufgabe">
    </form>
    <ul v-if="alle.Länge">
      <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" @remove="removeTodo"/>
    </ul>
    <p class="none" v-else>Nichts mehr in der Liste. Fügen Sie in der Eingabe oben eine neue Aufgabe hinzu.</p>
  </div>
</Vorlage>

<Skript>
importiere TodoItem aus "./TodoItem.vue"

let nextTodoId = 1

const createTodo = text => ({
  Text,
  ID: nächsteTodoId++
})

Standard exportieren {
  Komponenten:
    Aufgabenelement
  },

  Daten() {
    zurückkehren {
      alle Aufgaben:
        createTodo("Vue lernen"),
        createTodo("Erfahren Sie mehr über Einzeldateikomponenten"),
        createTodo("Sich verlieben ❤️")
      ],

      neuerTodoText: ""
    }
  },

  Methoden: {
    addTodo() {
      const trimmedText = this.newTodoText.trim()

      wenn (getrimmterText) {
        dies.todos.push(createTodo(getrimmterText))
      }

      this.newTodoText = ""
    },

    entferneTodo(Element) {
      dies.todos = dies.todos.filter(todo => todo !== Element)
    }
  }
}
</Skript>

<style lang="stylus">
*, *::vorher, *::nachher 
  Box-Größe, Rahmen-Box

html, Text
  Schriftart 16px/1.2 BlinkMacSystemFont, -apple-system, „Segoe UI“, Roboto, Helvetica, Arial, serifenlos
  Polsterung 10px

.Verpackung
  Breite 75%
  Rand 0 automatisch

bilden
  Rand unten 20px

Eingabe [Typ = "Text"]
  Breite 100%
  Polsterung 10px
  Rand 1px durchgezogen #777

ul, li
  Rand 0
  Polsterung 0

p.keine
  Farbe #888
  Schriftgröße klein
</Stil>

Haupt-JS

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren

erstelleApp(App).mount('#app')

TodoItem.vue

<Vorlage>
  <li>
    <span>{{ todo.text }}</span>
    <button @click.prevent="$emit('remove', todo)">Entfernen</button>
  </li>
</Vorlage>

<Skript>
Standard exportieren {
  Requisiten: {
    zu tun: {
      erforderlich: wahr,
      Typ: Objekt
    }
  }
}
</Skript>


<style lang="Stylus" scoped>
li
  Anzeigeflex
  Rand 5px 0

  Spanne
    Flexion 1
  
  Taste
    Rand 1px durchgehend orange
    Hintergrund orange 
    Farbe weiß
    Schriftgröße 0,8rem
    Polsterung 2px 4px
    Cursorzeiger

    &:schweben
      Rahmenfarbe #ff8100
      Hintergrund #ff8100
</Stil>

Hinweis <br /> Wenn Sie nicht wissen, wie Sie Webpack verwenden, wird empfohlen, den Anweisungen auf der offiziellen Website zu folgen und das Vue-Gerüst zum Installieren grundlegender Tools zu verwenden.
Oder Sie können die Datei „pakage.json“, die ich Ihnen gegeben habe, in das Projekt einfügen, „npm install“ ausführen, um die grundlegendste Umgebung zu installieren, und dann die lokale Entwicklung über „npm run dev“ durchführen.

Eigentlich glaube ich, dass diese Einzeldateikomponente schon jetzt wenig Nutzen bringt. Sofern es sich nicht um ein reines JS-Projekt handelt und die verwendeten Bibliotheken und Komponenten sehr alt sind, wird die Verwendung dieser Einzeldateikomponente zum Entwickeln neuer Funktionen gute Ergebnisse erzielen, vorausgesetzt, Sie sind mit Vue vertraut. Gleichzeitig empfehle ich Ihnen, Webpack zu lernen. Ich weiß nichts über Bable und versuche dann, das Projekt über Node zu starten.

Tatsächlich kann die Verwendung einer Datei zum Verwalten von HTML/CSS/JavaScript in Ebenen und deren Zusammenführung in einer Datei dazu führen, dass unser Projekt organisierter und standardisierter aussieht. Denn in unserer jq-Ära wird CSS oft mit HTML vermischt und ein einfaches Klickereignis erfordert eine Trennung. Diese Erfahrung ist sicherlich nicht so klar wie die „Schichtverwaltung“.

Quellen:
1. https://v3.cn.vuejs.org/guide/single-file-component.html#%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA
2. https://www.cnblogs.com/houxianzhou/p/14510450.html

Dies ist das Ende dieses Artikels über die Implementierung von Vue-Einzeldateikomponenten. Weitere relevante Inhalte zu Vue-Einzeldateikomponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung des Beispiels einer Vuejs-Einzeldateikomponente
  • Verwendung der einzelnen VueJS-Datei component.vue
  • Lösen Sie das Problem beim Laden von Stilen in der Vue-Einzeldateikomponente
  • So verwenden Sie Vue-Einzeldateikomponenten
  • Eine neue Methode zur Implementierung von Einzeldateikomponenten mit Stilen in Vuejs
  • Detaillierte Erläuterung der drei Möglichkeiten zum Schreiben von Vue-Einzeldateikomponenten
  • Vue-Einzeldateikomponente kann $refs-Problem nicht abrufen

<<:  Tutorial zur Docker-Installation in einer Linux-Umgebung

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 WinX64 unter Windows

Artikel empfehlen

Detaillierte Erklärung zur Verwendung des Alias-Befehls unter Linux

1. Verwendung von Pseudonymen Mit dem Alias-Befeh...

Detailliertes Tutorial zum Löschen von Linux-Benutzern mit dem Befehl userdel

Was ist Serdel userdel ist ein Low-Level-Tool zum...

Zusammenfassung einiger gängiger Protokolle in MySQL

Vorwort: Im MySQL-System gibt es viele verschiede...

So ändern Sie die Zeit in der virtuellen CentOS-Maschine

Das obere Bild zeigt die Systemzeit und das unter...

Detaillierte Erläuterung des Prozesses zum Abfragen von Benutzerberechtigungen mithilfe von MySQL-Anweisungen

Wie können Sie in MySQL die Berechtigungen anzeig...

Detaillierte Erklärung der Box-Größe in CSS3 (Content-Box und Border-Box)

Box-Größe in CSS3 (Inhaltsbox und Rahmenbox) Mit ...

Detaillierte Erklärung zum Remotezugriff auf die MySQL-Datenbank über Workbench

Vorwort Workbench ist auf einem Computer installi...

Detaillierte Erklärung zum Anpassen des Linux-Befehlsverlaufs

Der Befehl „Bash History“ im Linux-System hilft d...

Detaillierte Erklärung der grep- und egrep-Befehle in Linux

Vertreter / egrep Syntax: grep [-cinvABC] 'wo...

Fallstricke bei der Installation des komprimierten MySQL 8.0.18-Pakets und beim Zurücksetzen vergessener Passwörter

http://www.cppcns.com/shujuku/mysql/283231.html S...

Tiefgreifendes Verständnis der JavaScript-Rückruffunktionen

Inhaltsverzeichnis Vorwort Kurzübersicht: JavaScr...

Welche Bilddateiformate gibt es und wie wählt man sie aus?

1. Welche drei Formate? Dies sind: gif, jpg und pn...

Implementierungsprinzip und Nutzungsanalyse des Apache Bench-Stresstest-Tools

1: Durchsatz (Anfragen pro Sekunde) Eine quantita...

Detaillierte Erläuterung der Installation und Konfiguration von ROS in CLion2020.1.3 unter Ubuntu20.04

1. CLion herunterladen, installieren und aktivier...

Drei Schritte zur Lösung des IE-Adressleistensymbol-Anzeigeproblems

<br />Dieses Tutorial zur Erstellung von Web...