如何优雅的使用Vant组件库

安装Vant

npm i vant -S

引入Vant的第一种方法：导入所有组件（不推荐）
在src/main.js进行全局引入。

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

引入Vant的第二种方法：使用 babel-plugin-import (推荐)
它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

在在 babel.config.js 中配置plugins（插件）

module.exports = {
 plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true,
    }, 'vant'],
  ],
};

在main.js里面引入

import { Button } from 'vant';
Vue.use(Button);

移动端屏幕适配

方法一
//可以理解为320/16 = htmlWidth/设置根元素字体大小
//手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';


方法二
!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=750,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>750&&(n=750);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

//防止用户自己缩放页面大小