vant 按需引入

首先安装vant

1.下载vant

npm install vant -S

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

3.在src目录下新建.babelrc文件，配置plugins（插件）

// 在.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']//     ]//   };

这是在需要的组件中按需引入

<template><div class="home"><Button type="primary">主要按钮</Button><Button type="info">信息按钮</Button><Button type="default">默认按钮</Button><Button type="warning">警告按钮</Button><Button type="danger">危险按钮</Button></div>
</template><script>
import {
     Button } from "vant";export default {
    name: "home",components: {
    Button,},
};
</script>

这是全局按需引入
在src目录下新建.babelrc文件，配置plugins（插件）

import Vue from 'vue'
// 在这里引入你所需的组件
import {
    Button,
} from 'vant'// 按需引入UI组件
Vue.use(Button)

最后引入mian.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/plugins/plugins'Vue.config.productionTip = falsenew Vue({
    router,store,render: h => h(App)
}).$mount('#app')