vue-14-less 语法的使用

Posted 2021-01-11 wenbronk

vue-15-rem-less

在计算手机端页面的时候, 使用rem和less的方式, 可以方便的设置需要的大小等

1, 在index.html中添加rem的script 代码

在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>=750){
              docEl.style.fontSize = ‘100px‘;
            }else{
              docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘;
            }
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
      })(document, window);
    </script>

2, 安装 less 等

cnpm install --save-dev less less-loader

3, 在 config/webpack.base.conf.js 中添加 less 配置

 {
        test: /.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }

4, 安装 stype-loader 和 css-loader

cnpm install --save-dev style-loader css-loader

5, 在 vue页面中, 修改css 为:

<style scoped lang="less">

</style>

6, 就可以通过写less的语法来写css了

<template>
  <div class="hello">
    <div class="box">

      <p> 哈哈 </p>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

  /*200 * 300 宽度*/
  .box{
    width: 200 / 50rem;
    height: 300 / 50rem;
    background: dodgerblue;
    font-size: 16 / 50rem;
  }

</style>