在vue中使用Autoprefixed的方法
為了使我們的項(xiàng)目兼容各種瀏覽器，我們可能會(huì)在開發(fā)中寫大量的前綴。即使有了IDE為我們提供了邊界的方式。但是仍然需要我們?nèi)セ〞r(shí)間和精力。而這樣會(huì)浪費(fèi)我們很多的時(shí)間。為了在開發(fā)中提升團(tuán)隊(duì)的開發(fā)效率，并且同時(shí)節(jié)省時(shí)間，我們引入了autoprefixed。搭配webpack使用，在每次打包的時(shí)候自動(dòng)的給我們的樣式加上前綴來兼容不同的瀏覽器。
安裝依賴包
如果你是使用vue-cli構(gòu)建的項(xiàng)目。首先執(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'])
重新啟動(dòng)項(xiàng)目，就可以通過chrome的開發(fā)者工具，可以看到編譯后的css文件，會(huì)自動(dòng)的加上兼容性的前綴。就可以放心的寫css代碼了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue.js項(xiàng)目API、Router配置拆分實(shí)踐
這篇文章主要介紹了詳解Vue.js項(xiàng)目API、Router配置拆分實(shí)踐,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
在vue項(xiàng)目中優(yōu)雅的使用SVG的方法實(shí)例詳解
本文旨在介紹如何在項(xiàng)目中配置和方便的使用svg圖標(biāo)。本文以vue項(xiàng)目為例給大家介紹在vue項(xiàng)目中優(yōu)雅的使用SVG的方法，需要的朋友參考下吧2018-12-12
這篇文章主要介紹了解決vue addRoutes不生效問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
解決Vue-cli npm run build生產(chǎn)環(huán)境打包,本地不能打開的問題
今天小編就為大家分享一篇解決Vue-cli npm run build生產(chǎn)環(huán)境打包,本地不能打開的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
數(shù)據(jù)綁定的一個(gè)常見需求場景是操縱元素的 CSS class 列表和內(nèi)聯(lián)樣式,因?yàn)?nbsp;class 和 style 都是 attribute,我們可以和其他 attribute 一樣使用 v-bind 將它們和動(dòng)態(tài)的字符串綁定,這篇文章主要介紹了vue3 Class 與 Style 綁定操作方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
下面小編就為大家分享一篇基于vue 開發(fā)中出現(xiàn)警告問題去除方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
vue實(shí)現(xiàn)自定義el-table穿梭框功能
這篇文章主要介紹了vue實(shí)現(xiàn)自定義el-table穿梭框功能,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
element用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例
本文主要介紹了element-ui的用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue-cropper組件實(shí)現(xiàn)圖片切割上傳
這篇文章主要為大家詳細(xì)介紹了vue-cropper組件實(shí)現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05