Vant是有贊前端團隊開源的 移動端 組件庫功偿。目前 Vant 官方提供了 Vue 2 版本媒吗、Vue 3 版本和微信小程序版本辈毯。本次源碼學(xué)習(xí)為Vue2版本的Vant源碼學(xué)習(xí)坝疼。

特性

• 提供 60 多個高質(zhì)量組件，覆蓋移動端各類場景
• 性能極佳谆沃，組件平均體積不到 1kb（min+gzip）
• 單元測試覆蓋率 90%+钝凶，提供穩(wěn)定性保障
• 完善的中英文文檔和示例
• 支持 Vue 2 & Vue 3
• 支持按需引入
• 支持主題定制
• 支持國際化
• 支持 TypeScript
• 支持 SSR

相關(guān)鏈接

文檔鏈接
github鏈接

瀏覽器支持

Vant 2 支持現(xiàn)代瀏覽器以及 Android >= 4.0、iOS >= 8.0唁影。
Vant 3 支持現(xiàn)代瀏覽器以及 Chrome >= 51耕陷、iOS >= 10.0（與 Vue 3 一致）。

快速上手

安裝

• npm 安裝

# Vue 2 項目据沈，安裝 Vant 2：
npm i vant -S

• CDN安裝

<!-- 引入樣式文件 -->
<link
  rel="stylesheet"
  
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

<script>
  // 在 #app 標(biāo)簽下渲染一個按鈕組件
  new Vue({
    el: '#app',
    template: `<van-button>按鈕</van-button>`,
  });

  // 調(diào)用函數(shù)組件哟沫，彈出一個 Toast
  vant.Toast('提示');

  // 通過 CDN 引入時不會自動注冊 Lazyload 組件
  // 可以通過下面的方式手動注冊
  Vue.use(vant.Lazyload);
</script>

你可以通過以下免費 CDN 服務(wù)來使用 Vant:

• jsdelivr

• cdnjs

• unpkg

• 通過腳手架安裝

# 安裝 Vue Cli
npm install -g @vue/cli

# 創(chuàng)建一個項目
vue create hello-world

# 創(chuàng)建完成后，可以通過命令打開圖形化界面卓舵，如下圖所示
vue ui

image.png

引入組件

• 自動按需引入（推薦）

babel-plugin-import 是一款 babel 插件南用，它會在編譯過程中將 import 的寫法自動轉(zhuǎn)換為按需引入的方式膀钠。

# 安裝插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 無需設(shè)置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 對于使用 babel7 的用戶掏湾，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接著你可以在代碼中直接引入 Vant 組件
// 插件會自動將代碼轉(zhuǎn)化為方式二中的按需引入形式
import { Button } from 'vant';

Tips: 如果你在使用 TypeScript，可以使用 ts-import-plugin 實現(xiàn)按需引入肿嘲。

• 手動按需引入組件

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

• 導(dǎo)入所有組件
  Vant 支持一次性導(dǎo)入所有組件融击，引入所有組件會增加代碼包體積，因此不推薦這種做法雳窟。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Tips: 配置按需引入后尊浪，將不允許直接導(dǎo)入所有組件。

組件注冊
Vant 支持多種組件注冊方式封救。
? 全局注冊
全局注冊后拇涤，你可以在 app 下的任意子組件中使用注冊的 Vant 組件。

import Vue from 'vue';
import { Button } from 'vant';

// 方式一. 通過 Vue.use 注冊
// 注冊完成后誉结，在模板中通過 <van-button> 或 <VanButton> 標(biāo)簽來使用按鈕組件
Vue.use(Button);

// 方式二. 通過 Vue.component 注冊
// 注冊完成后鹅士，在模板中通過 <van-button> 標(biāo)簽來使用按鈕組件
Vue.component(Button.name, Button);

? 局部注冊
局部注冊后，你可以在當(dāng)前組件中使用注冊的 Vant 組件惩坑。

import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
};

瀏覽器適配

? Viewport 布局
Vant 默認使用 px 作為樣式單位掉盅，如果需要使用 viewport 單位 (vw, vh, vmin, vmax)，推薦使用 postcss-px-to-viewport 進行轉(zhuǎn)換以舒。
postcss-px-to-viewport 是一款 PostCSS 插件趾痘，用于將 px 單位轉(zhuǎn)化為 vw/vh 單位。
? PostCSS PostCSS 示例配置
下面提供了一份基本的 PostCSS 示例配置蔓钟，可以在此配置的基礎(chǔ)上根據(jù)項目需求進行修改永票。

// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
},
},
};

Tips: 在配置 postcss-loader 時，應(yīng)避免 ignore node_modules 目錄，否則將導(dǎo)致 Vant 樣式無法被編譯瓦侮。

? Rem 布局適配
如果需要使用 rem 單位進行適配艰赞，推薦使用以下兩個工具：
postcss-pxtorem 是一款 PostCSS 插件，用于將 px 單位轉(zhuǎn)化為 rem 單位
lib-flexible 用于設(shè)置 rem 基準(zhǔn)值

? PostCSS 示例配置
下面提供了一份基本的 PostCSS 示例配置肚吏，可以在此配置的基礎(chǔ)上根據(jù)項目需求進行修改方妖。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};  

? 其他設(shè)計稿尺寸
如果設(shè)計稿的尺寸不是 375，而是 750 或其他大小罚攀，可以將 rootValue 配置調(diào)整為:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
        propList: ['*'],
    },
  },
};

? 桌面端適配
Vant 是一個面向移動端的組件庫党觅，因此默認只適配了移動端設(shè)備，這意味著組件只監(jiān)聽了移動端的 touch 事件斋泄，沒有監(jiān)聽桌面端的 mouse 事件杯瞻。
如果你需要在桌面端使用 Vant，可以引入我們提供的 @vant/touch-emulator炫掐，這個庫會在桌面端自動將 mouse 事件轉(zhuǎn)換成對應(yīng)的 touch 事件魁莉，使得組件能夠在桌面端使用。

• 安裝模塊

npm i @vant/touch-emulator -S
// 引入模塊后自動生效
import '@vant/touch-emulator';
底部安全區(qū)適配

iPhone X 等機型底部存在底部指示條募胃，指示條的操作區(qū)域與頁面底部存在重合旗唁，容易導(dǎo)致用戶誤操作，因此我們需要針對這些機型進行安全區(qū)適配痹束。Vant 中部分組件提供了 safe-area-inset-top 或 safe-area-inset-bottom 屬性检疫，設(shè)置該屬性后，即可在對應(yīng)的機型上開啟適配祷嘶，如下示例：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

<!-- 開啟頂部安全區(qū)適配 -->
<van-nav-bar safe-area-inset-top />

<!-- 開啟底部安全區(qū)適配 -->
<van-number-keyboard safe-area-inset-bottom />

組件

組件分為 基礎(chǔ)組件 屎媳， 表單組件 ， 反饋組件 论巍， 展示組件 烛谊， 導(dǎo)航組件 ， 業(yè)務(wù)組件 這幾類嘉汰。

結(jié)語

以上就是參照文檔自己覺得比較重要的vant用法與信息丹禀。