在uniapp项目中使用组件库vant

688 阅读1分钟

在uniapp项目中使用组件库vant的步骤

在uniapp项目引入vant组件库的过程中,上网找过很多教程,有的不生效且报错,有的不报错也不生效,最后用以下办法成功引入,大家有需要可以试试看。

1.在项目的根目录中新建文件夹wxcomponents(文件名只能是这个不能改)

image.png

2.在文件根目录的终端输入命令npm i @vant/weapp -S --production安装

image.png

3.这时项目文件夹下会新增一个node_modules文件夹,找到dist文件夹并将其复制到前面建好的wxcomponents中,复制过来的dist文件名可以改成vant

image.png

image.png

4.在App.vue中引入样式文件

<style>
/*每个页面公共css */
@import "/wxcomponents/vant/common/index.wxss";
</style>

5.在pages.json中可以在对应页面按需引入组件或者想在所有页面都可使用的话就在globalStyle中配置

image.png