Heim > Artikel > Web-Frontend > Eine einfache Implementierungsmethode zum Einführen öffentlicher CSS-Dateien in Vue

Eine einfache Implementierungsmethode zum Einführen öffentlicher CSS-Dateien in Vue

小云云Original: 2018-01-24 10:26:012185Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich eine einfache (empfohlene) Methode zum Einführen öffentlicher CSS-Dateien in Vue vor. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wenn Sie das CSS nicht wie folgt in eine einzelne Dateikomponente schreiben möchten:

<template>
 <p id="app">
   <p class=&#39;nav-box&#39;>
    <ul class=&#39;nav&#39;>
      <li>
       <a href="#/" rel="external nofollow" rel="external nofollow" >home</a>
      </li>
       <li>
       <a href="#/odocument" rel="external nofollow" rel="external nofollow" >document</a>
      </li>
       <li>
       <a href="#/about" rel="external nofollow" rel="external nofollow" >about</a>
      </li>
    </ul>
   </p>
   <router-view></router-view>
 </p>
</template>

<script>
export default {
 name: 'app'
}
</script>

<style>
#app{
   text-align:center;
   color:#2c3e50;
   margin-top:60px;
}
</style>

Sie können den CSS-Stil extern schreiben und ihn über eine der folgenden Komponenten einführen Folgende drei Methoden:

1. Fügen Sie es in die Eintrags-JS-Datei main.js ein. Einige öffentliche Stildateien können hier eingeführt werden.

import Vue from 'vue'
import App from './App' // 引入App这个组件
import router from './router' /* 引入路由配置 */
import axios from 'axios'
import '@/assets/css/reset.css'/*引入公共样式*/

2. Füge

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>y</title>
  <link rel="stylesheet" type="text/css" href="src/assets/css/reset.css" rel="external nofollow" >/*引入公共样式*/
 </head>
 <body>
  <p id="app"></p>
  <!-- built files will be auto injected -->
 </body>
</html>

in index.html ein. 3. Füge es in app.vue ein, aber es gibt ein Problem mit dieser Einführung, das heißt auf der HEADH von index.html Es wird noch eine leere Seite angezeigt

<template>
 <p id="app">
   <p class=&#39;nav-box&#39;>
    <ul class=&#39;nav&#39;>
      <li>
       <a href="#/" rel="external nofollow" rel="external nofollow" >home</a>
      </li>
       <li>
       <a href="#/odocument" rel="external nofollow" rel="external nofollow" >document</a>
      </li>
       <li>
       <a href="#/about" rel="external nofollow" rel="external nofollow" >about</a>
      </li>
    </ul>
   </p>
   <router-view></router-view>
 </p>
</template>

<script>
export default {
 name: 'app'
}
</script>

<style>
  @import './assets/css/reset.css'; /*引入公共样式*/
</style>

Verwandte Empfehlungen:

PHP implementiert das Speichern von Website-Benutzerkennwörtern für die CSS-Dateifreigabe

Cache von JS- und CSS-Dateien automatisch leeren

Detaillierte Erklärung zum Laden externer CSS-Dateien in jQuery

Das obige ist der detaillierte Inhalt vonEine einfache Implementierungsmethode zum Einführen öffentlicher CSS-Dateien in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery css html JS

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Erläuterung der öffentlichen Ajax-Methodeninstanz von VueNächster Artikel：Detaillierte Erläuterung der öffentlichen Ajax-Methodeninstanz von Vue

In Verbindung stehende Artikel

Mehr sehen