代碼分析vue中如何配置less
更新時間：2018年09月28日 11:53:36 投稿：laozhang
在本篇文章中，我們給大家詳細(xì)講述了vue中如何配置less的詳細(xì)代碼和步驟，有需要的朋友跟著學(xué)習(xí)下。
安裝
npm install --save-dev less less-loader
npm install --save-dev style-loader css-loader
先在index.html頁面head標(biāo)簽內(nèi)插入這段代碼
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 640) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
在添加 build/webpack.base.conf.js 里面的
module.exports 里的 module 里添加下面這段配置
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}
組建 headers
<template>
<div> <p>header</p> </div>
</template>
<script>
export default {
name: "headers",
data() {
return {};
}
};
</script>
<style scoped>
.box {
height: 300/50rem;
width: 200/50rem;
background-color: red;
font-size: 16/50 rem;
}
</style>
效果展示：
相關(guān)文章
webpack如何將vue3單頁面應(yīng)用改造成多頁面應(yīng)用
這篇文章主要介紹了webpack如何將vue3單頁面應(yīng)用改造成多頁面應(yīng)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
Vue3利用自定義指令進(jìn)行內(nèi)容控制的實(shí)現(xiàn)方法
Vue3作為一個漸進(jìn)式JavaScript框架,提供了強(qiáng)大的自定義指令功能,使得權(quán)限控制變得既簡單又高效,本文將詳細(xì)介紹如何在Vue3中使用自定義指令來判斷內(nèi)容是否顯示,以滿足不同用戶權(quán)限下的界面展示需求,需要的朋友可以參考下2024-04-04
vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能
這篇文章主要介紹了vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue?uni-app框架實(shí)現(xiàn)上拉加載下拉刷新功能
uni-app是一個使用Vue.js(opens?new?window)開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺2022-09-09
如何用webpack4帶你實(shí)現(xiàn)一個vue的打包的項(xiàng)目
這篇文章主要介紹了如何用webpack4帶你實(shí)現(xiàn)一個vue的打包的項(xiàng)目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
前端vue?uni-app?cc-countdown倒計(jì)時組件使用詳解
cc-countdown是一個倒計(jì)時組件，它可以顯示剩余時間、天數(shù)、小時數(shù)、分鐘數(shù)和秒數(shù)，在本文中，我們將介紹如何在uni-app中使用cc-countdown組件,需要的朋友可以參考下2023-08-08
vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧詳解
這篇文章主要介紹了vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧,結(jié)合實(shí)例形式詳細(xì)分析了vue中雙向數(shù)據(jù)綁定的概念、原理、常見操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-03-03
elmentui是一款為vue設(shè)計(jì)的桌面組件庫,下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue子組件中使用window.onresize()只執(zhí)行一次問題
這篇文章主要介紹了vue子組件中使用window.onresize()只執(zhí)行一次問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue項(xiàng)目中常用的工具函數(shù)總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中常用的工具函數(shù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09