Vant引入及配置

1. vant 官网

https://youzan.github.io/vant/#/zh-CN/home

2. 通 npm 安装

npm i vant -S

3.安装 babel-plugin-import 插件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D

4.在 babel.config.js 中配置

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

5.接着你可以在代码中直接引入 Vant 组件

<template>
    <div class="con">
        <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:"Myindex",
    components: {
        [Button.name]: Button
    },
    data() {
        return {

        }
    }
}
</script>

<style scoped>
    .con{
        text-align: center;
    }
    button{
        display: block;
        margin: 0 auto;
    }
</style>

或者不在单个页面引用，在main.js全局引入

import Vue from 'vue'
import 'lib-flexible'
import App from './App.vue'

import {
  Cell,
  CellGroup,
  Icon,
  NavBar,
  Search,
  List,
  Toast,
  Button,
  Tab, Tabs,
  Col,
  Row,
  Calendar,
  Dialog,
  DropdownMenu, DropdownItem
} from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Search);
Vue.use(List);
Vue.use(Toast);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Col);
Vue.use(Row);
Vue.use(Calendar);
Vue.use(Dialog);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')