透過vue如何引入公共css文件-js教程-PHP中文網

透過vue如何引入公共css文件

亚连

發布： 2018-06-11 14:07:55

原創

3087 人瀏覽過

下面我就為大家分享一篇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樣式寫在外部，再透過下面三種方法中的一種引入：

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中引入，但是這樣引入有一個問題，就是在index.html的HEADH上會多出一個空的

<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喚起App？

node打包工具Pkg（詳細教學）

#在Angular中如何整合zTree程式碼

classList如何實作兩個按鈕樣式切換

以上是透過vue如何引入公共css文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！