Vue2按需引入vant组件

1.先引入vant-Ui

选择Vue2项目引入  

//引入 vant-Ui
npm i vant@latest-v2 -S

//按需引入
npm i babel-plugin-import -D

2.在根目录创建 babel.config.js文件 

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

3.引入组件之后,在src目录下创建文件夹 vant 然后创建 vant.js文件

import Vue from 'vue'
//引入需要的组件
import { Button } from "vant";
//一定要注册组件
Vue.use(Button);

4..在main.js中引入vant.js文件

// 引入组件文件
import '@/vant/vant'

5.可以直接在vue文件中使用啦

<van-button type="primary">主要按钮</van-button>

如果组件出现没有样式，引入样式

npm i vant@latest-v2 -S

如果重新启动项目的时候出现报错

说明axios所需的插件没有装上，解决办法

npm install axios qs --save
npm install antd babel-plugin-import --save

如果样式还是不生效那就在所需的页面引入

app.vue文件

import 'vant/lib/index.css'

 重新运行项目就跑起来了。