代碼分析vue中如何配置less

更新時間：2018年09月28日 11:53:36 投稿：laozhang

在本篇文章中，我們給大家詳細講述了vue中如何配置less的詳細代碼和步驟，有需要的朋友跟著學習下。

安裝

npm install --save-dev less less-loader

npm install --save-dev style-loader css-loader

先在index.html頁面head標簽內插入這段代碼

<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

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