vant 基本使用

vant 库的基本使用

vant 库是一款配合 Vue 使用的移动端 UI 组件库，轻量、高效。

• 项目本地安装 vant

  $ npm install vant -S
  

• 在 main.js 文件中引入 vant 库核心模块与它的样式

  import Vue from 'vue'
  
  import Vant from 'vant'
  import 'vant/lib/index.css'
  
  Vue.use(Vant)
  

• 现在就可以直接使用里面的组件了，具体组件去官网查看，官网地址

注意：这里使用的是全局加载，vant 中的任何组件都可以使用，但是有时我们需要按需加载，不需要引入整个 UI 库文件了

vant 按需加载

• 项目中然需要安装 vant

  $ npm npm install vant -S
  

• 安装 babel 相关依赖插件，用来按需加载

  $ npm install babel-plugin-import -D
  

• 配置 babel 相关的配置文件 （具体看文档）

  // 在 babel.config.js 文件中添加如下配置
  module.exports = {
    plugins: [
      ['import', {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      }, 'vant']
    ]
  }
  

• 在 main.js 文件中全局引入所需组件

  import Vue from 'vue'
  // 按类似解构的形式按需引入
  import { Button } from 'vant'
  
  // 使用组件
  Vue.use(Button)