代码分析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 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
简单三步,搞掂内存泄漏
2007/03/10 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
python笔记:mysql、redis操作方法
2017/06/28 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
详解Django配置优化方法
2019/11/18 Python
python调用百度API实现人脸识别
2020/11/17 Python
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
运动会广播稿200字
2014/01/15 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
浅谈MySQL函数
2021/10/05 MySQL
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js