vue項目中l(wèi)ess的一些使用小技巧
前言
我們所能看到的美觀的網頁都是經過UI精心設計后，由前端攻城獅搭建的。網頁想要有炫酷的樣式，就需要用到css來處理，其中不乏會出現(xiàn)大量重復、冗余的代碼，這時，像less、sass、scss等樣式預處理器就出現(xiàn)了，極大地精簡了css代碼，提高了開發(fā)效率。今天跟著本文一起看看在vue項目中使用less語法如何穿透效果和混入吧~
一、樣式穿透
vue項目中的結構是由template、script、style三部分構成。style中的lang屬性決定了樣式中的語法，設置了scoped屬性就可以避免當前頁面的樣式污染到其他頁面。
1. 什么是樣式穿透？
自己設置的樣式覆蓋原有的樣式
2. 如何使用？
當我們使用一個封裝好的公共組件的時候，我們對組件提供的原有樣式不滿意，想要調整一下樣式。我們不能修改公共組件中的樣式，這時候就需要用到樣式穿透來幫助我們解決這個問題了。
vue2中寫法
代碼如下（示例）：
<style lang="less" scoped>
/deep/ a {
text-decoration: none;
}
</style>
<style lang="less" scoped>
::v-deep a {
text-decoration: none;
}
</style>
vue3中寫法
<style lang="less" scoped>
:deep(a) {
text-decoration: none;
}
</style>
二、混入
1. 什么是混入？
類似于js中的函數(shù)，將樣式中重復的代碼抽離出來，使用的時候可以多次引入。
2. 如何使用？
定義
代碼如下（示例）：
<style lang="less" scoped>
.abc() {
color: skyblue
}
</style>
使用
<style lang="less" scoped>
p {
font-size: 20px;
.abc();
}
</style>
三、 less自動化導入
1. 自動化導入好處
可以將經常出現(xiàn)的樣式文件抽離出來，放到一個less文件中。
然后在需要用到的地方直接使用即可，不用手動引入文件
2. 如何實現(xiàn)？
- 使用vue-cli的style-resoures-loader插件來完成自動注入到每個vue組件中style標簽中
項目根目錄下終端中運行vue add style-resources-loader,添加一個vue-cli插件
注:終端窗口中會彈出詢問，寫入y之后選擇less即可
- 安裝完畢后會自動生成vue.config.js文件，在配置中把需要自動導入的less文件地址加上就可以了
代碼如下（示例）：
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 配置哪些文件需要自動導入
path.join(__dirname, './src/xx/xx.less')
]
}
}
}
總結
到此這篇關于vue項目中l(wèi)ess的一些使用小技巧的文章就介紹到這了,更多相關vue中l(wèi)ess使用技巧內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
雖然Vue.js作為一個現(xiàn)代化的前端框架,鼓勵使用其自身的響應式機制來處理DOM操作,但在某些情況下,尤其是在需要維護舊系統(tǒng)的項目中,可能會遇到需要引入jQuery的情況,本文將詳細講解如何在Vue項目中引入jQuery,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue 判斷兩個時間插件結束時間必選大于開始時間的代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue 實現(xiàn)拖動滑塊驗證功能(只有css+js沒有后臺驗證步驟)
這篇文章給大家介紹了基于vue實現(xiàn)拖動滑塊驗證功能，代碼引用css與js都是線上的，將代碼全部復制到一個html中可以直接打開，超級簡單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要給大家介紹了關于如何用Vue3切換中英文顯示的相關資料,在Vue3中使用vue-i18n進行國際化設置,包括安裝、配置、在組件中使用$t方法獲取翻譯字符串,以及可選的動態(tài)加載語言包以提高性能,需要的朋友可以參考下2024-11-11
vue3實戰(zhàn)-axios請求封裝問題(get、post、put、delete)
這篇文章主要介紹了vue3實戰(zhàn)-axios請求封裝問題(get、post、put、delete)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
AES對數(shù)據傳輸加密、解密處理---AES.js，下面分步驟給大家介紹vue使用AES.js的示例代碼，感興趣的朋友跟隨小編一起看看吧2021-10-10
這篇文章主要為大家介紹了Vue3組件異步更新和nextTick運行機制源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實現(xiàn)雙向數(shù)據綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧2025-02-02
這篇文章主要為大家詳細介紹了Vue自定義模態(tài)對話框彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue子頁面控制父頁面刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05