So referenzieren Sie Stildateien in der Vue-Einzelseitenanwendung

Dieses Mal zeige ich Ihnen, wie Sie in der einseitigen Anwendung von Vue auf Stildateien verweisen ist ein praktischer Fall.

Problembeschreibung

Bei .vue-Dateien besteht es ebenfalls aus drei Teilen: Struktur, Verhalten

und Stil . Es gibt ein Gültigkeitsbereichsattribut im Stilteil, was bedeutet, dass die aktuelle Seite gültig ist, wenn das Stil-Tag viele Stile enthält oder Duplikate zwischen .vue-Dateien vorhanden sind. Daher müssen Sie einige gängige Stile einführen. 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

Methode 2

// 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: '<App/>',
 components: { App }
})

Stildateien in eine bestimmte .vue einführen

Das Dateiorganisationsformat ist wie folgt:

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

Anwendung im Projekt

In meinem Projekt werden diese beiden Methoden angewendet und der öffentliche Stil verwendet. Die erste Methode wird verwendet, um auf den Stil jedes Moduls im Projekt zu verweisen. Dies ist zu diesem Zeitpunkt erforderlich Wenige Stile oder nur eine bestimmte Vue-Datei verwenden ihn. Sie können den CSS-Stil dennoch direkt in das Style-Tag der .vue-Datei schreiben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Wie Postman+Json und SpringMVC die Batch-Addition implementieren

Detaillierte Erläuterung der Verwendung der jQuery-Sichtbarkeit Filter

So übergeben Sie Token-Parameter in Postman

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