初使用VantUI

第一步：安装Vant

项目在集成终端打开根据项目版本输入对应指令进行安装；

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

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

第二部：引入组件

这里推荐自动按需引入
安装 babel-plugin-import 插件

npm i babel-plugin-import -D

在vue项目中配置 babel.config.js 文件

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

然后就可以使用了

选择所需要的组件 比如：Button 按钮
方法一：可以在需要的页面进行引入使用

<template>
  <div class="home">
    <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>
  </div>
</template>

<script>
import { Button } from "vant";
export default {
  name: "Home",
  components: {
    "van-button": Button,
  },
};
</script>

方法二：在main.js文件中引入并Vue.use使用

import { Slider , Icon } from 'vant';
Vue.use(Slider);
Vue.use(Icon);

然后其他的.vue文件就可以自由地使用已引入的组件。