So führen Sie öffentliche CSS-Dateien über Vue ein-js-Tutorial-php.cn

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

亚连

Freigeben： 2018-06-11 14:07:55

Original

3075 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!