在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 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
JS实现星星海特效
Dec 24 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服务器实现多session并发运行
2006/10/09 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
CSS常用网站布局实例
2008/04/03 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
axios基本入门用法教程
2017/03/25 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python调用服务接口的实例
2019/01/03 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python异步Web框架sanic的实现
2020/04/27 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
应届大学生求职信
2013/12/01 职场文书
运动会通讯稿300字
2014/02/02 职场文书
研讨会主持词
2014/04/02 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
工作说明书格式
2014/07/29 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
2015年工会工作总结范文
2015/07/23 职场文书