Vue 2组件库Vant 2

编程 · 2023-09-27 · 190 人浏览

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
    }
  }
}
JavaScript
Theme Jasmine by Kent Liao