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 = false

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