ホームページ > 記事 > ウェブフロントエンド > vueに公開CSSファイルを導入する簡単な実装方法
vueに公開CSSファイルを導入する簡単な実装方法
- 小云云オリジナル
- 2018-01-24 10:26:012177ブラウズ
この記事では主に、Vue でパブリック CSS ファイルを導入するための簡単な方法 (推奨) を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
このように単一のファイルコンポーネントに CSS を記述したくない場合は、次のようにします。
<template>
<p id="app">
<p class='nav-box'>
<ul class='nav'>
<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: 'app'
}
</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に導入します
<!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に導入しますが、この導入には問題があります。つまり、index.htmlのHEADHに空の
<template>
<p id="app">
<p class='nav-box'>
<ul class='nav'>
<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: 'app'
}
</script>
<style>
@import './assets/css/reset.css'; /*引入公共样式*/
</style>
が存在します。 . 関連する推奨事項:
PHP は Web サイト ユーザーのパスワードを CSS ファイル共有に保存するよう実装します
js および css ファイルのキャッシュを自動的にクリーンアップします
jQuery で外部 CSS ファイルをロードする方法の詳細な説明
以上がvueに公開CSSファイルを導入する簡単な実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。