安裝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);

//防止用戶自己縮放頁面大小

總結

以上是生活随笔為你收集整理的HTML页面使用vant控件,如何优雅的使用Vant组件库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。