vue 之 css module的使用方法
前言
最近學(xué)習(xí)webpack看到了一個(gè)新鮮的東西，之前都是通過(guò)scoped來(lái)區(qū)別類名，秉著任何時(shí)候?qū)W習(xí)都不晚的心情，作為小白的我也想揭揭css module的神秘面紗。
css module目的為所有類名重新生成類名，有效避開(kāi)了css權(quán)重和類名重復(fù)的問(wèn)題。相比于scoped為類名添加一個(gè)hash標(biāo)識(shí)效果優(yōu)秀不少，但相對(duì)的書寫會(huì)繁瑣一些。
項(xiàng)目基于cli3搭建，講真的，我也是被cli3鬼迷心竅了。相比2的繁瑣，3提供界面管理對(duì)我這樣子的小白確實(shí)直觀很多，而且需要配置vue.config.js也十分合適呢。
開(kāi)工
動(dòng)手之前先配置項(xiàng)目，網(wǎng)上很多文章說(shuō)需要下載css-loader插件，Vue中的vue-loader已經(jīng)集成了 CSS Modules，因此刪掉也能正常運(yùn)行
在vue.config.js中添加如下配置
css: {
loaderOptions: {
css: {
localIdentName: '[name]__[local]-[hash:base64:5]',
camelCase: true
}
}
}
- localIdentName是格式化類名：name是當(dāng)前文件名稱，local是當(dāng)前定義的類名名，hash是hash生成的字符串，長(zhǎng)度為5
- camelCase：在類名有中橫線時(shí)，'only'在標(biāo)簽上綁定類名時(shí)只支持大駝峰，true：支持大駝峰也支持中括號(hào)命名
特別注意：css module所有類名都要:class進(jìn)行綁定
<div> <p class="less-color">這是通過(guò)less設(shè)置的:global字體顏色為粉色</p> <p :class="$style.lessFontSize">這是通過(guò)less設(shè)置的:local字體大小為40px</p> <p :class="$style.red">This should be red</p> <h4 :class="$style.headerTit">類別推薦</h4> <h4 :class="$style['header-tit']">類別推薦</h4> </div>
樣式表需要添加module，可以通過(guò)console.log(this.$style);輸出當(dāng)前所有的:local { }類名。默認(rèn)是:local { }，即:local前綴是可以省略的，若要全局類名則資額在:global { }內(nèi)
<style module lang="less">
:global {
.less-color {
color: pink;
}
}
:local {
.less-font-size {
font-size: 40px;
}
.red {
color: red;
}
.header-tit {
color: blue;
}
}
</style>
效果
和配置一樣：當(dāng)前文件名稱，local是當(dāng)前定義的類名名，hash是hash生成的字符串，長(zhǎng)度為5；true：支持大駝峰也支持中括號(hào)命名
<div> <p class="less-color">這是通過(guò)less設(shè)置的:global字體顏色為粉色</p> <p class="index__less-font-size-2QPBO">這是通過(guò)less設(shè)置的:local字體大小為40px</p> <p class="index__red-3YoIm">This should be red</p> <h4 class="index__header-tit-3pTz4">類別推薦</h4> <h4 class="index__header-tit-3pTz4">類別推薦</h4> </div>
后記
過(guò)程還是蠻曲折的，小白就是道阻且長(zhǎng)啊，不過(guò)我相信積少成多，會(huì)有蛻變的一天的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中路由重定向redirect問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue樹(shù)表格分頁(yè)的實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue樹(shù)表格分頁(yè)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
這篇文章主要介紹了vue實(shí)現(xiàn)添加與刪除圖書功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍demo
這篇文章主要為大家介紹了vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中，PDF文檔的使用非常普遍，因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來(lái)探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫(kù)嵌入PDF文檔吧2023-08-08
elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟
upload上傳是前端開(kāi)發(fā)很常用的一個(gè)功能,在Vue開(kāi)發(fā)中常用的Element組件庫(kù)也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下2023-12-12
vue.js綁定事件監(jiān)聽(tīng)器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽(tīng)器的方法,結(jié)合實(shí)例形式分析了vue.js基于v-on事件綁定響應(yīng)鼠標(biāo)點(diǎn)擊相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見(jiàn)的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
這篇文章主要介紹了vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
Vue輪播圖組件的封裝可通過(guò)封裝組件、使用插件、配置化等方式實(shí)現(xiàn)，主要包括圖片預(yù)加載、定時(shí)輪播、無(wú)限滾動(dòng)、手勢(shì)滑動(dòng)、響應(yīng)式布局等功能，實(shí)現(xiàn)方式可使用Vue的生命周期函數(shù)、自定義事件、計(jì)算屬性等技術(shù)2023-04-04