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中的項(xiàng)目打包及部署全流程
這篇文章主要介紹了Vue中的項(xiàng)目打包及部署全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式
這篇文章主要介紹了Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
說說如何使用Vuex進(jìn)行狀態(tài)管理(小結(jié))
這篇文章主要介紹了說說如何使用Vuex進(jìn)行狀態(tài)管理(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue讓router-view默認(rèn)顯示頁面操作方法
一個home頁面,點(diǎn)擊左邊的菜單欄,右邊顯示頁面,因此都知道在右邊放一個router-view然后配置路由即可,然而問題出現(xiàn)在：重新打開的時候,默認(rèn)是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認(rèn)顯示頁面操作方法,感興趣的朋友一起看看吧
2024-03-03
element-ui 表格sortable排序手動js清除方式
這篇文章主要介紹了element-ui 表格sortable排序手動js清除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue3中的抽離封裝方法實(shí)現(xiàn)
vue3中的任何一個組合式api都可以單獨(dú)抽離出去在另一個文件，最后只需要回歸到setup()中即可，這篇文章主要介紹了vue3的抽離封裝方法,需要的朋友可以參考下
2022-08-08
vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項(xiàng)目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
vue 解決data中定義圖片相對路徑頁面不顯示的問題
這篇文章主要介紹了vue 解決data中定義圖片相對路徑頁面不顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
如何刪除vue項(xiàng)目下的node_modules文件夾
這篇文章主要介紹了如何刪除vue項(xiàng)目下的node_modules文件夾，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
element-ui select多選綁定回顯值問題
這篇文章主要介紹了element-ui select多選綁定回顯值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04