在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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
javascript[js]获取url参数的代码
Oct 17 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
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.MVC的模板标签系统(三)
2006/09/05 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
PHP面向对象精要总结
2014/11/07 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP单链表的实现代码
2016/07/05 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python实现ping的方法
2015/07/06 Python
python 实时遍历日志文件
2016/04/12 Python
python编程实现希尔排序
2017/04/13 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Python中str.join()简单用法示例
2018/03/20 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
平安家庭事迹材料
2014/12/20 职场文书
党支部半年考察意见
2015/06/01 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
保姆聘用合同
2015/09/21 职场文书
详解Python中*args和**kwargs的使用
2022/04/07 Python