vueに公開CSSファイルを導入する簡単な実装方法

この記事では主に、Vue でパブリック CSS ファイルを導入するための簡単な方法 (推奨) を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

このように単一のファイルコンポーネントに CSS を記述したくない場合は、次のようにします。

<template>
 <p>
   </p>
<p>
    </p>
<ul>
      <li>
       <a>home</a>
      </li>
       <li>
       <a>document</a>
      </li>
       <li>
       <a>about</a>
      </li>
    </ul>
   
   <router-view></router-view>
 
</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 'vue'
import App from './App' // 引入App这个组件
import router from './router' /* 引入路由配置 */
import axios from 'axios'
import '@/assets/css/reset.css'/*引入公共样式*/

2.index.htmlに導入します

nbsp;html>

 
  <meta>
  <meta>
  <title>y</title>
  <link>/*引入公共样式*/
 
 
  <p></p>
  <!-- built files will be auto injected -->
 

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

<template>
 <p>
   </p>
<p>
    </p>
<ul>
      <li>
       <a>home</a>
      </li>
       <li>
       <a>document</a>
      </li>
       <li>
       <a>about</a>
      </li>
    </ul>
   
   <router-view></router-view>
 
</template>

<script>
export default {
 name: &#39;app&#39;
}
</script>

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

が存在します。 . 関連する推奨事項:

PHP は Web サイト ユーザーのパスワードを CSS ファイル共有に保存するよう実装します

js および css ファイルのキャッシュを自動的にクリーンアップします

jQuery で外部 CSS ファイルをロードする方法の詳細な説明

以上がvueに公開CSSファイルを導入する簡単な実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。