文章摘要： 轻量、可定制的移动端 Vue 组件库。

简介

  • 性能极佳，组件平均体积小于 1KB（min+gzip）
  • 80+ 个高质量组件，覆盖移动端主流场景
  • 零外部依赖，不依赖三方 npm 包
  • 使用 TypeScript 编写，提供完整的类型定义
  • 单元测试覆盖率超过 90%，提供稳定性保障
  • 提供丰富的中英文文档和组件示例
  • 提供 Sketch 和 Axure 设计资源
  • 支持 Vue 2、Vue 3 和微信小程序
  • 支持 Nuxt 2、Nuxt 3，提供 Nuxt 的 Vant Module
  • 支持主题定制，内置 700+ 个主题变量
  • 支持按需引入和 Tree Shaking
  • 支持无障碍访问（持续改进中）
  • 支持深色模式
  • 支持服务器端渲染
  • 支持国际化，内置 30+ 种语言包
  • 官网链接：Vant 4

安装

  • VantUI将组件和样式分开存储，使用时需要手动引入组件和样式，因此可以考虑使用插件来实现自动按需引入组件的样式。

安装vant的组件插件

# Vue 3 项目，安装最新版 Vant
npm install vant

# Vue 2 项目，安装 Vant 2
npm install vant@latest-v2

安装vant的自动按需引入样式的插件

npm install @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

安装浏览器适配插件

窗口布局

  • Vant 默认使用 px 作为样式单位。
  • postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。
npm install postcss-px-to-viewport --save-dev

Rem布局

  • 一个用于 PostCSS 的插件，用于从像素单位生成 rem 单位。
npm install postcss postcss-pxtorem --save-dev

用法

配置vite.config.js 文件

基于 Vite 的项目，在 vite.config.js 文件中配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  build: {
    sourcemap: false
  }
})

注册组件

import Vant from 'vant';
import { createApp } from 'vue';

const app = createApp();

app.use(Vant);

// Lazyload 指令需要单独进行注册
app.use(vant.Lazyload);

<script setup>

  • 在 <script setup> 中可以直接使用 Vant 组件，不需要进行组件注册。
<script setup>
  import { Button } from 'vant';
</script>

<template>
  <Button />
</template>

浏览器适配

Viewport 布局

  • Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。
  • postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

PostCSS PostCSS 示例配置:

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

插件推荐

在桌面端上模拟移动端 touch 事件

npm i @vant/touch-emulator

如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。

npm install postcss-px-to-viewport --save-dev
更新时间: