Vant自动按需引入组件

2,735 阅读1分钟

官网给出的步骤是:

image.png

问题1 无法实现自动按需引入:

正常情况下在安装完babel-plugin-import后,项目的根目录下会自动生成.babelrc文件,但我在安装完该插件后,根目录下并没有生成.babelrc文件,终端也没有报错。

后来硬着头皮自己在根目录下新建了一个.babelrc文件,继续按步骤进行,结果报错,终端提示我安装组件对应的css文件,这显然不是解决方案,偏离了自动按需引入的初衷。

解决: 我还是认为是插件安装出现了一些未知的问题,因此将node_modules文件和我自己创建的.babelrc文件删除,执行npm i,这次没有新建.babelrc文件,只配置了babel.config.js,然后在main.js中引入import {Button} from 'vant'并使用 Vue.use(Button) 成功实现了

问题2 引入多个组件失败:

引入多个组件时,想当然就这么写了

image.png

结果报错:

image.png

很明显,组件没有注册成功

解决: 在查询问题1的原因的时候,看到一篇文章说使用时以下两种方法都可以

image.png

灵机一动 改成方法二,成功解决

-_- 问题奇奇怪怪...