首页  代码  正文

Vue 2组件库Vant 2

2023.9.27 三毛笔记 代码 151

安装

安装命令：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'。

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
    }
  }
}