@[toc]

安装

通过 npm 安装

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

导入

全部导入

在main.js中

import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)

使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

按需导入

安装一个插件

yarn add babel-plugin-import -D

module.exports = {
   
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
   
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

把引入组件的步骤抽离到单独的js文件中比如 utils/vant-ui.js

import {
    Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

main.js中进行导入

// 导入按需导入的配置文件
import '@/utils/vant-ui'

toast 轻提示

两种使用方式

1. 导入调用 ( 组件内 或 非组件中均可 )

import {
    Toast } from 'vant';
Toast('提示内容');

1. 通过this直接调用 ( 组件内 )
   main.js 注册绑定到原型

import {
    Toast } from 'vant';
Vue.use(Toast)

this.$toast('提示内容')

vw适配

yarn add postcss-px-to-viewport@1.1.1 -D

项目根目录， 新建postcss的配置文件postcss.config.js

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