代码分析vue中如何配置less


Posted in Javascript onSeptember 28, 2018

安装

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

Javascript 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
使用JavaScript破解web
Sep 28 #Javascript
详解node字体压缩插件font-spider的用法
Sep 28 #Javascript
JS canvas绘制五子棋的棋盘
May 28 #Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 #Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 #Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 #Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 #Javascript
You might like
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP文件与目录操作示例
2016/12/24 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python中print和return的作用及区别解析
2019/05/05 Python
Python class的继承方法代码实例
2020/02/14 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
业务代表的岗位职责
2013/11/16 职场文书
实习单位接收函模板
2014/01/10 职场文书
元旦晚会邀请函
2014/02/01 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
北京颐和园导游词
2015/01/30 职场文书
护士岗位竞聘书
2015/09/15 职场文书