Vue 2组件库Vant 2

共计 1156 个字符，预计需要花费 3 分钟才能阅读完成。

Vant 2 官网：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart

安装

安装命令：yarn add vant@latest-v2。

引入组件

导入所有组件

在 src\main.js 文件中添加：

import Vant from 'vant'
import 'vant/lib/index.css'
// 插件安装初始化，内部会将所有的 vant 组件进行导入注册
Vue.use(Vant)

使用测试，在 src\App.vue 文件中随便添加一个按钮组件：

<template>
  <div id="app">
    <van-button type="danger"> 危险按钮 </van-button>
    <router-view />
  </div>
</template>

<style lang="less"></style>

自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

安装插件：yarn add babel-plugin-import -D。

在 babel.config.js 中添加配置项：

plugins: [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]

在 src\main.js 文件中添加：

// 按需导入
import {Button} from 'vant'
Vue.use(Button)

随着按需导入组件越来越多，这时可以考虑将按需导入相关代码进行抽离，专门封装到一个 js 文件当中，例如封装到 src\utils\vant-ui.js。

// 按需导入
import Vue from 'vue'
import {Button, Switch} from 'vant'
Vue.use(Button)
Vue.use(Switch)

然后在 src\main.js 中导入配置文件即可：import '@/utils/vant-ui'。

vw 适配

官方配置：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage#liu-lan-qi-gua-pei

安装插件

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

安装插件：yarn add postcss-px-to-viewport@1.1.1 -D。

配置

在项目根目录下新建 postcss.config.js 文件，填入配置：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // vw 适配的标准屏宽度 iPhone X
      viewportWidth: 375
    }
  }
}