vue.js引入css（vuejs引入外部js文件並使用）

本文目錄一覽：

• 1、vue+css實現夜間模式
• 2、Vue如何引入外鏈css和js
• 3、Vue怎麼局部引入css
• 4、解決vuejs項目里css引用背景圖片不能顯示的問題
• 5、為什麼在vue的main.js中引入css或者報錯，不引入沒問題

vue+css實現夜間模式

最近項目中要求實現夜間模式，整理一下實現方法。

ps. 我們的項目是混合開發，所以夜間模式要通過原生交互實現，如果直接是h5項目，則可省去原生交互這塊。

step1 原生交互方法

step2  獲取模式方法

step3 實現方法

1、使用css大類區分

2、針對不同class類定義css屬性全局變量

3、全局引入樣式文件（main.js中引入）

4、頁面中可定義css私有變量（包含頁面中特殊的顏色屬性，不止涉及亮度更改的圖片）

        變量定義規範：–（頁面名稱）-自定義

        建議將白天與夜間模式圖片區分兩個文件夾存儲

5、變量使用規範

總結：

1、注意css變量的使用的兼容性，例如安卓5的手機可能識別不了變量，解決方法：postcss可以試試看

2、如果項目中已使用less，可直接用less來實現，現未發現其兼容性問題（下一篇文章我會寫less實現夜間模式）

Vue如何引入外鏈css和js

直接在主頁面裡面引入就行，但要注意class名和ID名不要出現重複，因為Vue是單頁面，就是把所有組件都添加到主頁面上進行顯示的，所以引入的路徑也要寫關於主頁面的相對路徑

Vue怎麼局部引入css

vue只是一個js框架，和你引用css沒有太大的關係，和普通的js一樣的處理方式就好。

例如你可以新建一個link標籤，然後插入到head標籤下之類的。

解決vuejs項目里css引用背景圖片不能顯示的問題

解決：build-utils.js里，修改：增加

publicPath:’../../’,

if

(options.extract)

{

return

ExtractTextPlugin.extract({

use:

loaders,

publicPath:’../../’,

fallback:

‘vue-style-loader’

})

}

else

{

return

[‘vue-style-loader’].concat(loaders)

}

以上這篇解決vuejs項目里css引用背景圖片不能顯示的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:解決vue打包之後靜態資源圖片失效的問題解決vue打包css文件中背景圖片的路徑問題詳談vue+webpack解決css引用圖片打包後找不到資源文件的問題vue

cli使用絕對路徑引用圖片問題的解決關於Vue背景圖打包之後訪問路徑錯誤問題的解決

為什麼在vue的main.js中引入css或者報錯，不引入沒問題

這種情況很簡單,動態添加進去的tr不能應用js和css,在tr添加進頁面後,再調用一下$(“tr”).addClass(“樣式名”);重新給他添加一下樣式即可.至於js的話,在綁定事件的時候用:$(“tr”).live(funtion(){})這樣就可以了.