vant组件库使用

vue组件库：开发指南 - 快速上手 - 《Vant 2.12 移动端组件库文档》 - 书栈网 · BookStack

vue的组件库并不是唯一的，vant-ui仅仅只是组件库的一种。一般会按照不同平台进行分类：

1）pc端：element-ui(element-plus)   ant-design-vue

2）移动端：vant-ui（常用：移动端掌握vant即可，其他缺少维护）  mint ui   cube ui(滴滴）

使用步骤：

1、下载安装vant 。(  vue2需要安装vant2版本，vue3可以安装vant3或者vant4版本）

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

 2、引入组件库

      这里可以选择全局引入和按需引入，区别是全局引入更加消耗性能。这里以按需自动引入为例，如果需要全局引入和手动引入，参考vant2官方文档使用说明。

• 安装插件：

# 安装插件
npm i babel-plugin-import -D

• 项目配置：找到项目中的babel.config.js添加以下配置项。

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

ps:修改相关项目配置后需要重启项目。

• 模块化引用：也可以直接在入口文件main.js中导入注册相关组件，但是方便代码的可维护性和阅读性，封装独立的vant引入模块。

       （1). utils公共方法下新建vant-ui.js文件

         

         (2).在文件中引入注册vant组件

import Vue from 'vue'
import { Button, Tabbar, TabbarItem, NavBar } from 'vant'

// 方式一. 通过 Vue.use 注册
// 注册完成后，在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
Vue.use(Button)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(NavBar)

         （3).main.js中全局导入

   

    3.使用测试

4.补充使用方法（以toast为例）

首先需要在vant-ui.js中ui模块中注册安装toast组件。

使用方法会有两种：

方法1：导入调用（组件内或者非组件内都可以使用）

import { Toast } from 'vant'

Toast('我是提示信息')

方法2：通过this直接调用（必须组件内）

 this.$toast('我是提示信息2')

第二种调用方法是因为在导入注册vant组件的时候，相关组件方法会自动挂载到vue的原型上。所以在组件内部可以直接使用this.$方法名的方式调用。