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 的入門學習啦，我們就可以根據需要，選擇一個后端框架，進行開發啦。

 

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