脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue中如何配置less

代码分析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>

效果展示：

您可能感兴趣的文章:

相关文章

  • webpack如何将vue3单页面应用改造成多页面应用

    webpack如何将vue3单页面应用改造成多页面应用

    这篇文章主要介绍了webpack如何将vue3单页面应用改造成多页面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-05
  • Vue3利用自定义指令进行内容控制的实现方法

    Vue3利用自定义指令进行内容控制的实现方法

    Vue3作为一个渐进式JavaScript框架,提供了强大的自定义指令功能,使得权限控制变得既简单又高效,本文将详细介绍如何在Vue3中使用自定义指令来判断内容是否显示,以满足不同用户权限下的界面展示需求,需要的朋友可以参考下
    2024-04-04
  • vue-cli3+ts+webpack实现多入口多出口功能

    vue-cli3+ts+webpack实现多入口多出口功能

    这篇文章主要介绍了vue-cli3+ts+webpack实现多入口多出口功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue uni-app框架实现上拉加载下拉刷新功能

    Vue uni-app框架实现上拉加载下拉刷新功能

    uni-app是一个使用Vue.js(opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台
    2022-09-09
  • 如何用webpack4带你实现一个vue的打包的项目

    如何用webpack4带你实现一个vue的打包的项目

    这篇文章主要介绍了如何用webpack4带你实现一个vue的打包的项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 前端vue uni-app cc-countdown倒计时组件使用详解

    前端vue uni-app cc-countdown倒计时组件使用详解

    cc-countdown是一个倒计时组件，它可以显示剩余时间、天数、小时数、分钟数和秒数，在本文中，我们将介绍如何在uni-app中使用cc-countdown组件,需要的朋友可以参考下
    2023-08-08
  • vue中的双向数据绑定原理与常见操作技巧详解

    vue中的双向数据绑定原理与常见操作技巧详解

    这篇文章主要介绍了vue中的双向数据绑定原理与常见操作技巧,结合实例形式详细分析了vue中双向数据绑定的概念、原理、常见操作技巧与相关注意事项,需要的朋友可以参考下
    2020-03-03
  • 解决vue3使用element-ui的具体操作

    解决vue3使用element-ui的具体操作

    elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue子组件中使用window.onresize()只执行一次问题

    vue子组件中使用window.onresize()只执行一次问题

    这篇文章主要介绍了vue子组件中使用window.onresize()只执行一次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue项目中常用的工具函数总结

    Vue项目中常用的工具函数总结

    这篇文章主要给大家介绍了关于Vue项目中常用的工具函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09

最新评论