快捷導(dǎo)航

vue 引入公共css文件的簡單方法(推薦)

更新時間：2018年01月20日 16:53:31 作者：Black_Tmt

下面小編就為大家分享一篇vue 引入公共css文件的簡單方法(推薦)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如果不想把css寫在單文件組件里如這樣：

<template>
 <div id="app">
   <div 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>
   </div>
   <router-view></router-view>
 </div>
</template>

<script>
export default {
 name: 'app'
}
</script>

<style>
#app{
   text-align:center;
   color:#2c3e50;
   margin-top:60px;
}
</style>

可以將css樣式寫在外部，再通過下面三種方法中的一種引入：

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>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

3、在app.vue中引入，但是這樣引入有一個問題，就是在index.html的HEADH上會多出一個空的

<template>
 <div id="app">
   <div 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>
   </div>
   <router-view></router-view>
 </div>
</template>

<script>
export default {
 name: 'app'
}
</script>

<style>
  @import './assets/css/reset.css'; /*引入公共樣式*/
</style>

以上這篇vue 引入公共css文件的簡單方法(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue各種loader的基本配置與使用示例教程
這篇文章主要介紹了Vue?各種loader的基本配置與使用，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
vue-cli配置flexible過程詳解
這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07
element-ui 彈窗組件封裝的步驟
這篇文章主要介紹了element-ui 彈窗組件封裝的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
vue實現(xiàn)列表滾動的過渡動畫
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表滾動的過渡動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
Vue中的methods、computed計算屬性和watch監(jiān)聽屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計算屬性和watch監(jiān)聽屬性的使用和區(qū)別,本文通過示例代碼給大家介紹的非常詳細對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-01-01
Vue接入高德地圖的完整實例
近期在用vue做一個環(huán)保類的項目,要求使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue接入高德地圖的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-06-06
詳解Vue.js v-for不支持IE9的解決方法
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
el-input限制輸入正整數(shù)的兩種實現(xiàn)方式
el-input框是Element UI庫中的一個輸入框組件，用于接收用戶的輸入，這篇文章主要介紹了el-input限制輸入正整數(shù),需要的朋友可以參考下
2024-02-02
vue使用keep-alive進行組件緩存方法詳解(組件不緩存問題解決)
keep-alive包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們,下面這篇文章主要給大家介紹了關(guān)于vue使用keep-alive進行組件緩存方法(組件不緩存問題解決)的相關(guān)資料,需要的朋友可以參考下
2022-09-09
vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03