Heim > Artikel > Web-Frontend > 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: '<App/>', 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
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!