Heim > Web-Frontend > js-Tutorial > Hauptteil

So führen Sie öffentliche CSS-Dateien über Vue ein

亚连
Freigeben: 2018-06-11 14:07:55
Original
3087 Leute haben es durchsucht

Im Folgenden werde ich Ihnen eine einfache (empfohlene) Methode zum Einführen öffentlicher CSS-Dateien in Vue vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Wenn Sie das CSS nicht in einer einzelnen Dateikomponente wie dieser 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: &#39;app&#39;
}
</script>

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

Sie Sie können den CSS-Stil extern schreiben und ihn mit einer der folgenden drei Methoden einführen:

1. Führen Sie ihn in die Eintrags-JS-Datei main.js ein finden Sie hier Einführung.

import Vue from &#39;vue&#39;
import App from &#39;./App&#39; // 引入App这个组件
import router from &#39;./router&#39; /* 引入路由配置 */
import axios from &#39;axios&#39;
import &#39;@/assets/css/reset.css&#39;/*引入公共样式*/
Nach dem Login kopieren

2. Führen Sie es in app.vue ein, aber es wird ein Problem mit dieser Einführung geben ein extra leeres

<!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>
Nach dem Login kopieren

im HEADH von index.html. Das habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird. Verwandte Artikel:

Wie verwende ich das http-Modul in node.js

Wie verwende ich js, um eine App in WeChat aufzurufen?

Node-Packaging-Tool Pkg (ausführliches Tutorial)

So integrieren Sie zTree-Code in Angular

Wie classList den Stilwechsel mit zwei Tasten implementiert

Das obige ist der detaillierte Inhalt vonSo führen Sie öffentliche CSS-Dateien über Vue ein. 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