在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文件。文件的原本代碼應該如下。
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue.js項目API、Router配置拆分實踐,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本文旨在介紹如何在項目中配置和方便的使用svg圖標。本文以vue項目為例給大家介紹在vue項目中優(yōu)雅的使用SVG的方法，需要的朋友參考下吧2018-12-12
這篇文章主要介紹了解決vue addRoutes不生效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
解決Vue-cli npm run build生產(chǎn)環(huán)境打包,本地不能打開的問題
今天小編就為大家分享一篇解決Vue-cli npm run build生產(chǎn)環(huán)境打包,本地不能打開的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
數(shù)據(jù)綁定的一個常見需求場景是操縱元素的 CSS class 列表和內(nèi)聯(lián)樣式,因為 class 和 style 都是 attribute,我們可以和其他 attribute 一樣使用 v-bind 將它們和動態(tài)的字符串綁定,這篇文章主要介紹了vue3 Class 與 Style 綁定操作方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
下面小編就為大家分享一篇基于vue 開發(fā)中出現(xiàn)警告問題去除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue實現(xiàn)自定義el-table穿梭框功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
element用腳本自動化構(gòu)建新組件的實現(xiàn)示例
本文主要介紹了element-ui的用腳本自動化構(gòu)建新組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家詳細介紹了vue-cropper組件實現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05