官网

1.基本使用

  1. 1.安装Vant UI
  2.   npm i vant -S
  4. 2.main.js 导入MintUI，并注册到Vue
  5.   import Vue from 'vue'
  6.  //全局引入Vant UI的样式以及组件库
  7.  import 'vant/lib/index.css';
  8.  import Vant from 'vant';
  9.  Vue.use(Vant);
  11.   var vm = new Vue({
  12.     el: '#app',
  13.     data: {
  14.         msg: '123'
  15.     },
  16.     render:e=>e(app)
  17.   })
  20. 3.app.vue
  21. <template>
  22.     <div>
  23.         <van-button type="default" @click="showPopup">默认按钮</van-button>
  24.         <van-button type="primary">主要按钮</van-button>
  25.         <van-button type="info">信息按钮</van-button>
  26.         <van-button type="warning">警告按钮</van-button>
  27.         <van-button type="danger">危险按钮</van-button>
  29.         <van-popup v-model="show">内容</van-popup>
  30.     </div>
  31. </template>

2.按需导入

  1. //1.安装babel-plugin-import插件
  2.     npm i babel-plugin-import -D
  3. //2.修改babel的配置文件
  4.     {
  5.     "presets": [
  6.         "env",
  7.         "stage-0"
  8.     ],
  9.     "plugins": [
  10.         "transform-runtime",
  11.         [
  12.             "import",
  13.             {
  14.                 "libraryName": "vant",
  15.                 "libraryDirectory": "es",
  16.                 "style": true
  17.             }
  18.         ]
  19.     ]
  20. }
  21.  //3.修改main.js
  22. //按需加载 用到什么就去引入什么
  23. import { Button,Popup,Form,Field } from 'vant';
  24. Vue.use(Button);
  25. Vue.use(Popup);
  26. Vue.use(Form);
  27. Vue.use(Field);

babel版本配置错误解决方案