Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Schritte zum Referenzieren externer Stildateien in Vue

php中世界最好的语言
Freigeben: 2018-05-02 16:32:59
Original
3365 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zum Verweisen auf externe Stildateien ausführlich erläutern. Welche Vorsichtsmaßnahmen es für Vue gibt, um auf externe Stildateien zu verweisen? Fälle, werfen wir einen Blick darauf.

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 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

// 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 }
})
Nach dem Login kopieren

Methode 2

Stildateien in eine bestimmte .vue einführen

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

Das Dateiorganisationsformat ist wie folgt:

Anwendung im Projekt

In meinem Projekt werden beide Methoden angewendet, und der öffentliche Stil übernimmt die erste Methode, Zitat die zweite Methode wird für den Stil jedes Moduls im Projekt verwendet. Zu diesem Zeitpunkt müssen Sie flexibler sein, wenn es relativ wenige Stile gibt Obwohl die Datei sie verwendet, können Sie den CSS-Stil immer noch 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:

vue reduziert die Anzahl der Serveranfragen

Zusammenfassung allgemeiner Wissenspunkte in der Vue.js-Entwicklung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Referenzieren externer Stildateien in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!