vant 在项目中自动按需引入

1.通过npm安装。npm i vant -S

2.安装插件 。npm i babel-plugin-import -D

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

3.添加配置

 // 在.babelrc 中添加配置
{ 
"plugins": [ 
["import", { 
"libraryName": "vant", 
"libraryDirectory": "es", 
"style": true }]
 ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4. 在代码中直接引入vant组件。

如  import {Field,Form,Button} from 'vant';

 然后 ，我们发现报错了

解决办法如下：

要注册组件之后才能用，此刻我们的代码就能正常运行了