代码分析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实现显示和隐藏的4种简单方式
Aug 28 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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
example1.php
2006/10/09 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript内置对象arguments详解
2014/03/16 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
vue 实现图片懒加载功能
2020/12/31 Vue.js
python更新列表的方法
2015/07/28 Python
Python实现随机选择元素功能
2017/09/14 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python右对齐的实例方法
2020/07/05 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
个人优缺点自我评价
2014/01/27 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
青岛导游词
2015/02/12 职场文书
党支部工作总结2015
2015/04/01 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript