快捷導(dǎo)航

代碼分析vue中如何配置less

更新時(shí)間：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頁(yè)面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>

效果展示：

您可能感興趣的文章:

vue
less

相關(guān)文章

淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用
這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
Vue之插件詳解
這篇文章主要為大家介紹了Vue之插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助，希望能夠給你帶來(lái)幫助
2021-11-11
vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁(yè)面示例詳解
這篇文章主要為大家介紹了vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁(yè)面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue中v-model對(duì)select的綁定操作
這篇文章主要介紹了vue中v-model對(duì)select的綁定操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue使用watch監(jiān)聽(tīng)一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue使用watch監(jiān)聽(tīng)一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
vue 自動(dòng)生成swagger接口請(qǐng)求文件的方法
這篇文章主要介紹了vue 自動(dòng)生成swagger接口請(qǐng)求文件的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
利用Vue Router實(shí)現(xiàn)單頁(yè)面應(yīng)用(SPA)的代碼示例
在當(dāng)今前端開(kāi)發(fā)中,單頁(yè)面應(yīng)用（SPA）已成為一種主流的開(kāi)發(fā)模式,它通過(guò)在用戶與網(wǎng)頁(yè)之間提供更流暢的交互體驗(yàn),來(lái)改變傳統(tǒng)多頁(yè)面應(yīng)用的思維,本文將詳細(xì)介紹如何利用 Vue.js 中的 Vue Router 來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的單頁(yè)面應(yīng)用,需要的朋友可以參考下
2025-01-01
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
本文給大家介紹了在vue項(xiàng)目中使用svg圖標(biāo)的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-04-04
vue3中vue-meta的使用方法解析
這篇文章主要介紹了vue3中vue-meta的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue.js配合$.post從后臺(tái)獲取數(shù)據(jù)簡(jiǎn)單demo分享
今天小編就為大家?guī)?lái)一篇vue.js配合$.post從后臺(tái)獲取數(shù)據(jù)簡(jiǎn)單demo分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08