Zwei Möglichkeiten für die Vue-Einzelseitenanwendung, auf separate Stildateien zu verweisen

In diesem Artikel erfahren Sie, wie Sie in einer Vue-Einzelseitenanwendung auf eine separate Stildatei verweisen. In diesem Artikel werden CSS-Dateien als Beispiel verwendet, und Freunde, die diese benötigen, können darauf verweisen

Problembeschreibung

Für .vue-Dateien besteht es auch aus drei Teilen: Struktur, Verhalten und Stil. Es gibt einen Gültigkeitsbereich Attribut im Stilteil, das heißt Die aktuelle Seite ist gültig. Wenn das Stil-Tag viele Stile enthält oder Duplikate zwischen .vue-Dateien vorhanden sind, sieht es immer so aus, als ob es nicht ordentlich genug aussieht, sodass Sie einige Gemeinsamkeiten einführen müssen Stile. Lassen Sie uns zunächst darüber sprechen, wie Sie eine separate Stildatei einführen. Hier nehmen wir CSS-Dateien als Beispiel und sprechen dann über die Aufteilung von Stildateien in meinem Projekt

Einführung separater Stildateien

Methode 1

Fügen Sie statische Ressourcen in main.js ein. Diese Methode ermöglicht die gemeinsame Nutzung der Stildatei durch Komponenten im Projekt

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
// 此处引入静态资源
require('./assets/css/style.css')
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Methode 2

Stildateien in einer bestimmten .vue einführen

<template>
  ...
</template>

<script>
  export default {
    name: "test"
  }
</script>
<style scoped>
 @import "style.css";
</style>

Die Dateien sind wie folgt organisiert:

Anwendungen im Projekt

In meinem Projekt werden beide Methoden in der ersten Methode referenziert, und in der zweiten Methode wird auf die Stile jedes Moduls im Projekt verwiesen Speichern Sie die benötigten Stile in diesem Modul. Wenn es relativ wenige Stile gibt oder nur eine bestimmte Vue-Datei diese verwendet, können Sie den CSS-Stil trotzdem direkt in die .vue-Datei schreiben. im Style-Tag.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Implementierung der Keep-Alive-Cache-Funktion von Vue

Erfassen von URL und Href des Front-End-Interviews Fragen, src

Verwenden Sie „vue-route's beforeEach“, um die Navigationsschutzfunktion (Anmeldung vor Routensprung überprüfen) zu implementieren

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten für die Vue-Einzelseitenanwendung, auf separate Stildateien zu verweisen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!