mpvue 引入Vant Weapp组件库

mpvue 引入Vant Weapp组件库

1、从git仓库克隆vant weapp组件库: https://github.com/youzan/vant-weapp.git;
2、将下载文件中的dist文件拷贝到自己的项目目录中(可以新建static目录,然后将dist文件导入static文件夹中);
在这里插入图片描述
3、组件的引入:
在需要使用ui组件的页面引入需要的某个ui组件,mpvue只需要在main.json文件中引入
在这里插入图片描述
4、页面使用该组件
在这里插入图片描述
5、效果:
在这里插入图片描述
6、遇到的坑:
开始不管怎么引入页面都会报错: VM1601:1 thirdScriptError sdk uncaught third Error Unexpected token import SyntaxError: Unexpected token import;
在这里插入图片描述
解决办法: 在微信开发工具右边的详情里面勾选 es6转化为es5;(谁能告诉我为什么,谢谢!!!)
在这里插入图片描述

### 如何在 HBuilder 中引入 Vant Weapp 组件 #### 通过 npm 安装并配置项目依赖 为了能够在基于 Uni-app 的项目中顺利使用 Vant Weapp 组件库,在命令行工具里执行如下操作来初始化 package.json 文件以及安装指定版本的 `@vant/weapp` 包: ```bash npm init -y npm i @vant/weapp@1.3.3 -S --production ``` 这会自动下载所需的资源到项目的 node_modules 目录下[^3]。 #### 手动复制组件至 wxcomponents 文件夹 另一种常见的做法是在本地解压已下载好的 Vant Weapp 库压缩包之后,将其内部的 dist 文件夹重命名为 weapp 并放置于项目的根目录下的 wxcomponents 子文件夹内。具体而言就是创建或找到现有的 wxcomponents 文件夹并将上述提到的内容放入其中[^2]。 #### 利用 HBuilderX 插件市场功能快速集成 对于那些更倾向于图形界面操作而非命令行指令的人来说,还可以借助 IDE 自带的功能完成相同的目标——即打开 HBuilderX 后依次点击菜单栏上的【工具】-> 【插件安装】 -> 【安装新插件】 -> 【前往插件市场安装】,接着输入关键词 "vant" 进行查找;如果初次尝试未能发现任何结果,则可以调整筛选选项直至目标出现为止。一旦找到了合适的插件条目就可以按照提示继续下去直到整个过程结束。值得注意的是,采用这种方式通常会在工作空间里面自动生成相应的结构化布局以便开发者进一步编辑和调试[^4]。 无论采取哪种途径都建议仔细阅读官方文档获取最新最权威的信息,并且留意不同框架之间可能存在兼容性差异从而影响最终呈现效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值