vue を介してパブリック CSS ファイルを導入する方法-jsチュートリアル-php.cn

vue を介してパブリック CSS ファイルを導入する方法

亚连

リリース： 2018-06-11 14:07:55

オリジナル

3022 人が閲覧しました

ここで、Vue でパブリック CSS ファイルを導入するための簡単な方法 (推奨) を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

このように単一のファイルコンポーネントに CSS を書きたくない場合:

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

ログイン後にコピー

CSS スタイルを外部に記述し、次の 3 つの方法のいずれかを使用して導入できます:

1 、エントリ js ファイル main.js で導入されており、いくつかのパブリックスタイルファイルをここで導入できます。

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.index.htmlに導入します

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

ログイン後にコピー

3.app.vueに導入しますが、この導入には問題があります。つまり、HEADHに空の

が存在します。 Index.html

<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>
  @import &#39;./assets/css/reset.css&#39;; /*引入公共样式*/
</style>

ログイン後にコピー

以上、皆さんの参考になれば幸いです。

node.jsでhttpモジュールを使用する方法

jsを使用してWeChatでアプリを呼び出す方法?

ノードパッケージ化ツールPkg (詳細なチュートリアル)

zTreeコードをAngularに統合する方法

classListが2つのボタンスタイル切り替えを実装する方法

以上がvue を介してパブリック CSS ファイルを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。