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.

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

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

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>

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 !

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!