Vue verweist auf separate Stildateien

Dieses Mal bringe ich Ihnen VueReferenzseparate Stildateien. Welche Vorsichtsmaßnahmen gibt es für Vue, um auf separate Stildateien zu verweisen?

Problembeschreibung

Für .vue-Dateien besteht es auch aus drei Teilen: Struktur, Verhalten und Stil. Es gibt einen Bereich Das Attribut bedeutet, dass die aktuelle Seite gültig ist. Wenn das Style-Tag viele Stile enthält oder Duplikate zwischen .vue-Dateien vorhanden sind, sieht es immer so aus, als ob es nicht ordentlich genug wäre. Daher ist es notwendig, einige gängige Stile einzufü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

// 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 }
})

Methode 2

Stildateien in eine bestimmte .vue einführen

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

Das Dateiorganisationsformat ist wie folgt:

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:

Das obige ist der detaillierte Inhalt vonVue verweist auf separate Stildateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!