在vue中使用Autoprefixed的方法
更新時間：2018年07月27日 08:59:09 作者：detectiveHLH
這篇文章主要介紹了在vue中使用Autoprefixed的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
為了使我們的項目兼容各種瀏覽器，我們可能會在開發(fā)中寫大量的前綴。即使有了IDE為我們提供了邊界的方式。但是仍然需要我們?nèi)セ〞r間和精力。而這樣會浪費我們很多的時間。為了在開發(fā)中提升團隊的開發(fā)效率，并且同時節(jié)省時間，我們引入了autoprefixed。搭配webpack使用，在每次打包的時候自動的給我們的樣式加上前綴來兼容不同的瀏覽器。
安裝依賴包
如果你是使用vue-cli構(gòu)建的項目。首先執(zhí)行以下代碼安裝依賴包。
npm install autoprefixer postcss postcss-loader -D
修改vue-loader配置文件
修改目錄/build/vue-loader.conf.js文件。文件的原本代碼應(yīng)該如下。
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config[buildEnv].productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
})
}
將以上代碼，替換成如下代碼。
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config[buildEnv].productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
}),
postcss: [require('autoprefixer')({browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']})]
}
修改utils
打開/build/utils.js，定位到如下代碼。
postcss: generateLoaders()
將上面的代碼更改為如下代碼。
postcss: generateLoaders(['css?-autoprefixer'])
重新啟動項目，就可以通過chrome的開發(fā)者工具，可以看到編譯后的css文件，會自動的加上兼容性的前綴。就可以放心的寫css代碼了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue列表自動滾動實例代碼,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
在處理Konva中的異步加載順序問題時,確保在圖像加載完成后再添加其他元素是關(guān)鍵,通過將回調(diào)函數(shù)放在imageObj.onload中,并正確處理變量捕獲,我們可以確保文本總是繪制在圖片之上,這不僅解決了顯示順序的問題,也為未來的調(diào)試提供了明確的方向,感興趣的朋友一起看看吧2024-07-07
本文通過實例代碼給大家介紹了Vue中實現(xiàn)拖放排序功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
Vuex中mutations和actions的區(qū)別及說明
這篇文章主要介紹了Vuex中mutations和actions的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue請求后端接口導(dǎo)出excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解)
這篇文章主要介紹了vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
vue3中的watch是一個組合式的API使用時需要引入,下面這篇文章主要給大家介紹了關(guān)于vue3下watch使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue.directive 自定義指令的問題小結(jié),需要的朋友可以參考下2018-03-03
解決vue?vite啟動項目報錯ERROR:?Unexpected?“\x88“?in?JSON?的問題
這篇文章主要介紹了vue?vite啟動項目報錯ERROR:?Unexpected?“\x88“?in?JSON?原因,本文給出出現(xiàn)此類問題的原因所在并給出解決方法，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了解決vant-UI庫修改樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11