在vue 中使用 less的教程详解


Posted in Javascript onSeptember 26, 2018

1.安装

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 class="box"> <p>header</p> </div>
</template>

<script>
export default {
 name: "headers",
 data() {
  return {};
 }
};
</script>

<style scoped lang="less">
.box {
 height: 300/50rem;
 width: 200/50rem;
 background-color: red;
 font-size: 16/50 rem;
}
</style>

效果展示:  

在vue 中使用 less的教程详解

在vue 中使用 less的教程详解  

总结

以上所述是小编给大家介绍的在vue 中使用 less的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue如何进行动画的封装
Sep 26 #Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 #Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 #Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 #Javascript
vue单页缓存方案分析及实现
Sep 25 #Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 #Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 #Javascript
You might like
PHP中的替代语法简介
2014/08/22 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jQuery技巧总结
2011/01/01 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python支付宝支付示例详解
2019/08/22 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
工程采购员岗位职责
2014/03/09 职场文书
银行贷款委托书范本
2014/10/11 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL