Vue引入VantUI框架

官方文档：Vant 2 - Mobile UI Components built on Vue

方式一：自动按需引入组件

第一步：安装vant-ui

yarn add vant@latest-v2

第二步：引入vant-ui

//安装按需引入插件
yarn add babel-plugin-import -D

 在babel.config.js中配置

// 在 babel.config.js 中配置（vant按需引入的插件配置）
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

 在/src/main.js中引入

//按需引入vant-ui组件
import { Button, Rate } from 'vant';
//引入CSS
import 'vant/lib/index.css';
Vue.use(Button).use(Rate);

第三步：打开官网复制代码，粘贴到需要用组件的地方

方式二： 导入所有组件

 直接在/src/main.js中引入

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

Vue.use(Vant);