Vue+Vant入門教程+移動端適配

       Vant做爲一款前端框架，能夠說是爲Vue量身定製，尤爲適合手機端開發，其中集成了許多商城組件，特別適合開發商城系統。提起手機端開發，如今的手機品牌、型號不少，手機的屏幕尺寸規格也大不相同。簡單的說，從4寸屏幕，到6.8寸手機屏幕，再到12寸Pad屏幕都有，那麼，咱們如何實現一套CSS代碼，在不一樣尺寸的屏幕上自動得放大、縮小內容，實現總體頁面的美觀？這就須要在代碼裏進行移動端適配，具體的代碼文章中會給出。

 

 本篇文章要點：

1.Vue中引用Vant組件

2.實現移動端設備匹配

 

1、Vue中引用Vant

 

一、安裝 Vant，若是你的網絡很慢，能夠設置淘寶鏡像安裝：

npm install vant --save --registry=https://registry.npm.taobao.org

 

二、引入組件

咱們採用最佳的引入方式——按需引入，這樣不會增長項目代碼包的體積。

 

須要安裝一款 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'
  ]
]

這樣就能夠在組件裏引用嘍。

 

三、引用，以引用 van-button爲例：

import { Button } from 'vant';

 

註冊組件：

components:{
    [Button.name]: Button
}

 

四、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>

 

執行以下圖：

 

2、執行移動端適配

 首先須要對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的入門學習啦，咱們就能夠根據須要，選擇一個後端框架，進行開發啦。

 

文章中若有不正確的地方，歡迎你們交流指正。