So trennen Sie CSS in Vue

So trennen Sie CSS in Vue: Legen Sie zuerst „“ fest und erstellen Sie dann eine neue index.js-Datei HTML-, JS- und CSS-Dateien.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6. Diese Methode ist für alle Computermarken geeignet.

Empfohlene verwandte Artikel: vue.js

Bei der normalen Erstellung und Referenzierung von Vue-Dateien sind HTML, CSS und JS alle zusammen. Obwohl es praktisch ist, auf diese Weise zu schreiben, ist die Seite oder der Code größer In diesem Fall gibt es manchmal viel Code, selbst wenn Sie Komponenten verwenden. Einfach ausgedrückt ist die Suche nicht förderlich für die Programmierung und im Großen und Ganzen für die Bildoptimierungsleistung. Es ist eine gute Wahl, HTML, CSS und JS im Code zu trennen.

Stellen Sie zunächst Folgendes in der .vue-Datei ein:

<template src="./record.html"></template>
<script src="./record.js"></script>
<style src="./record.scss"></style>

Erstellen Sie eine neue index.js-Datei wie folgt:

import record from './record.vue';
export default record;

Erstellen Sie die entsprechenden Dateien record.html, record.js, record.scss, und fertig. Nehmen Sie. Für js:

// -- NAME --
const name = 'record';
// -- DATA --
const data = function () {
  return {
    
  };
};
// -- COMPUTED --
const computed = {
 
};
// -- COMPONENTS -- 
const components = {
}
// -- WATCH --
const watch = {
  
};
// -- METHODS --
const methods = { 
  
};
// -- HOOKS --
function mounted() {
}
// == EXPORT ==
export default {
  name: name,
  data: data,
  components: components,
  computed: computed,
  watch: watch,
  methods: methods,
  mounted: mounted
};

Eine andere Methode kann direkt zitiert werden:

<template>
  <div>html</div>
</template>
<script src="./***.js"></script>
<style src="./***.css"></style>

Es gibt verschiedene Formen, aber die Grundidee besteht darin, unabhängige Dateien zu trennen und das Laden einzuführen

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