Vant 移动端Vue组件库的使用

一，通过 npm 安装

在现有项目中使用 Vant 时，可以通过npm或yarn安装 (在文章下方有vant组件库的地址)

1 | 通过 npm 安装
2 | npm i vant -S

3 | 通过 yarn 安装
4 | yarn add vant

二，引入组件

一共有两种方式
1：按需引入
2：全局引入 (Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法)

1| 方式一 按需引入：
安装插件：npm i babel-plugin-import -D
// 先在.babelrc 中添加配置
// 在babel.config.js文件里写进去下面这些

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

接着要在main.js里引入

1 | import vant from './util/vant'

我通常都会在src下建一个 util 文件夹 用来存放所有 js 文件

1 | 在util文件夹里建一个 vant.js文件
2 | 里面先引入 import Vue from 'vue'
3 | 然后在引入 import { Button } from 'vant';
4 | 括号里面的内容就是按照需要用的组件引入到里面
5 | 然后还需要把引入的 输出一下 Vue.use(Button 用几个 输出几个 都要写
6 | 然后就可以在页面里使用这些组件了~

vant组件库地址： https://youzan.github.io/vant/#/zh-CN/

本文地址：https://blog.csdn.net/weixin_45685517/article/details/107488068