标签：adapter tor director 技术 商城 pre exports fun doc
Vant作为一款前端框架，可以说是为Vue量身定制，尤其适合手机端开发，其中集成了许多商城组件，特别适合开发商城系统。提起手机端开发，现在的手机品牌、型号很多，手机的屏幕尺寸规格也大不相同。简单的说，从4寸屏幕，到6.8寸手机屏幕，再到12寸Pad屏幕都有，那么，我们如何实现一套CSS代码，在不同尺寸的屏幕上自动得放大、缩小内容，实现整体页面的美观？这就需要在代码里进行移动端适配，具体的代码文章中会给出。
本篇文章要点：
1.Vue中引用Vant组件
2.实现移动端设备匹配
一、Vue中引用Vant
1、安装 Vant，如果你的网络很慢，可以设置淘宝镜像安装：
npm install vant --save --registry=https://registry.npm.taobao.org
2、引入组件
我们采用最佳的引入方式——按需引入，这样不会增加项目代码包的体积。
需要安装一款 babel 插件：babel-plugin-import，它会在编译过程中将 import 的写法自动转换为按需引入的方式，如果网络慢，依然可以设置淘宝镜像安装。
npm i babel-plugin-import -D --registry=https://registry.npm.taobao.org
对babel-plugin-import进行配置，将一下内容粘贴至babel.config.js 下：
plugins: [
[ ‘import‘, { libraryName: ‘vant‘, libraryDirectory: ‘es‘,style: true }, ‘vant‘ ] ]
这样就可以在组件里引用喽。
3、引用，以引用 van-button为例：
import { Button } from ‘vant‘;
注册组件：
components:{
[Button.name]: Button
}
4、template中引用：
<template> <div id="app"> <van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> </div> </template>
执行如下图：
二、执行移动端适配
首先需要对rem有所了解，因为后面的CSS中，不再用‘px’做单位，而是用‘rem’，简单地说，我们给Dom元素的尺寸设置成以rem为单位，因为rem是相对于根元素，也就是html元素，因此针对不同尺寸的屏幕，只需要更改html元素默认的字体大小，也就相当于更改了自动更改了元素的尺寸。
代码（位置：./src/utils/adapter.js）：
module.exports = function (doc, win) { var docEl = win.document.documentElement; var resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘; /** * ================================================ * 设置根元素 font-size * 当设备宽度为 375 (iPhone6) 时，根元素 font-size = 16px; * ================================================ */ var refreshRem = function () { var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; if (!clientWidth) return; var fontSize; var width = clientWidth; fontSize = 16 * width / 375; docEl.style.fontSize = fontSize + ‘px‘; docEl.style.maxWidth = 768 + ‘px‘; docEl.style.margin = ‘0 auto‘; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, refreshRem, false); doc.addEventListener(‘DOMContentLoaded‘, refreshRem, false); refreshRem(); };
在mian.js中引用即可：
// 执行移动端适配 require(‘./utils/adapter‘)(document, window);
到这里，就完成了Vant的入门学习啦，我们就可以根据需要，选择一个后端框架，进行开发啦。
文章中如有不正确的地方，欢迎大家交流指正。
标签：adapter tor director 技术 商城 pre exports fun doc
原文地址：https://www.cnblogs.com/Fcode-/p/12710396.html
