HTML页面使用vant控件,如何优雅的使用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);

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