设置loading & 移动端适配（rem）

一、设置加载的几种方式

• 使用vant UI库的Toast（轻提示）
  文档地址：https://youzan.github.io/vant/#/zh-CN/toast

1、直接在组件中导入使用

     <script>
         import { Toast } from 'vant';
     </script>

• 调用方式例如：

      Toast.loading({
        mask: true,
        message: '加载中...'
      });

2、在main.js文件中引入，会自动在 Vue 的 prototype 上挂载 $toast 方法，在组件内通过this调用。

    //导入vants ui
    import Vant from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Vant);

• 或者只是在main.js文件中单独引入Toast模块

    import { Toast } from 'vant';
    import 'vant/lib/index.css';
    Vue.use( Toast );

• 调用方式例如：

    this.$toast('提示文案');

3、将Toast封装后便于使用

（1）新建文件夹untils，然后在untils文件夹下新建index.js文件
（2）在index.js文件中导入Toast模块，并使用

    import Vue from 'vue'
    //导入有赞轻提示
    import { Toast } from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Toast);

（3）导出

    export const loading = () => {
        Toast.loading({
            // mask: true, //蒙层
            duration: 0,       // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            loadingType: 'spinner',
            message: '加载中...'
        });
    }

（4）在main.js中通过解构导入，并在Vue的原型上添加属性，在组件内通过this调用

    //导入封装后的轻提示
    import { loading, clear } from './untils/index'
    Vue.prototype.$loading = loading

• 调用方式例如：

      //获取数据前加载loading
      this.$loading();

二、移动端适配方案

1、了解响应式布局

（1）通过媒体查询：
      媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。（即根据设备的不同宽度为同一页面设置不同的css样式）

（2）写两套代码，一套PC端，一套移动端，通过判断用户使用的设备，跳转到相应的网站

2、移动端的适配（rem）

• （1）元素的度量单位

  • ：像素
  • ：根据父元素来计算大小
  • ：根据根节点（html）元素的font-size进行计算大小
  • ：根据手机屏幕计算大小
  • ：小程序特有单位

• （2）的计算公式

  • 元素的宽度（高度） = html 的font-size * rem*

• （3）使用进行移动端适配的原理

  • 第一步：以iPhone 6的宽度（375px）作为参考，给它的根元素节点设置font-size大小
  • 第二步：获取手机屏幕宽度，根据屏幕宽度，以iPhone 6 作为参照物进行等比缩放

3、在项目中配置

• （1）安装 amfe-flexible ，用来根据手机宽度，自动设置根元素字体的大小
  • 第一步：安装

     npm i  amfe-flexible --save

• 第二步：在main.js中导入

     import 'amfe-flexible';

• （2）安装 postcss-pxtorem，px自动转成rem，免去手动输入rem
  • 第一步：安装

     npm i   postcss-pxtorem --save

• 第二步：在vue.config.js中配置

      const autoprefixer = require('autoprefixer');
      const pxtorem = require('postcss-pxtorem');
      
      module.exports = {
        css: {
          loaderOptions: {
            postcss: {
              plugins: [
                autoprefixer(),
                pxtorem({
                  rootValue: 37.5,
                  propList: ['*'],
                  // 该项仅在使用 Circle 组件时需要
                  // 原因参见 https://github.com/youzan/vant/issues/1948
                  selectorBlackList: ['van-circle__layer']
                })
              ]
            }
          }
        }
      };

• （3）css的处理
  • （3.1）、、都是预处理语言，方便我们模块化编写代码,必须编译成css文件才能使用
  • （3.2）用来对css文件进行处理,称之为后处理语言，而我们可以使用postcss中的一个模块pxtorem，便于我们写完样式后自动转换成rem