suchen

Heim >Web-Frontend >js-Tutorial >So führen Sie öffentliche CSS-Dateien über Vue ein

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

亚连
亚连Original
2018-06-11 14:07:553102Durchsuche

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>

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;/*引入公共样式*/

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>

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!

node.js css html angular JS http
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：Die Verwendung von Vue zur Einführung von CSS hat weniger verwandte ProblemeNächster Artikel：Die Verwendung von Vue zur Einführung von CSS hat weniger verwandte Probleme

In Verbindung stehende Artikel

Mehr sehen