组件库Vant在Vue项目中的引入

Vant 是一个轻量、可靠的移动端组件库

1.完整引入

1.安装依赖包

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

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

2. 在main.js文件中导入所以组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3. 在任意组件中使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

2.按需引入

1.安装依赖包                 与1.1安装依赖包一样

2.安装插件

  npm i babel-plugin-import -D

3. 配置.babelrc 或者是 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']
    ]
  };

4.在 main.js 文件中注册组件

import { Button } from 'vant';

5. 可以在任意组件中使用                与1.3一致

3.傻瓜式安装

vue add vant

直接在组件中使用