Vue + Vant 入门教程+移动端适配

       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 的入门学习啦，我们就可以根据需要，选择一个后端框架，进行开发啦。

 

文章中如有不正确的地方，欢迎大家交流指正。