uniapp使用Vant-weapp（最新）

已于 2023-01-11 12:01:55 修改
阅读量6.6k 收藏 28
点赞数 13
分类专栏： _uniapp _Vue 文章标签： uni-app 前端
于 2023-01-11 11:22:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shmilynn_/article/details/128641317
版权
该文详细介绍了在uniapp项目中集成vant-weapp组件库的步骤，包括从GitHub下载zip包，新建文件夹，解压并重命名，引入样式，配置全局组件以及在页面中使用vant组件。特别指出，需要在vant的引入路径前添加/wxcomponents/前缀。
摘要由CSDN通过智能技术生成

目录

1.先正常创建一个uniapp项目

2.从github下载vant包，zip格式的

3.项目根目录下新建wxcomponents/@vant  两个文件夹

 4.把下载好的压缩包解压，

放在刚才创建好的@vant文件下，并重命名为weapp

5.App.vue中引入vant的样式 

6.在pages.json文件下的 "globalStyle" 下的

"usingComponents" 中按需引入

7.页面中使用，如果没有样式从uniapp重启微信小程序

总结：

1.先正常创建一个uniapp项目

2.从github下载vant包，zip格式的

vant组件包https://github.com/youzan/vant-weapp/releases

3.项目根目录下新建wxcomponents/@vant  两个文件夹


 4.把下载好的压缩包解压，

把dist放在刚才创建好的@vant文件下，并重命名为weapp

5.App.vue中引入vant的样式 

6.在pages.json文件下的 "globalStyle" 下的 "usingComponents" 中按需引入

因为vant-weapp的按需引入路径皆为"@vant/weapp/button/index"这种格式

所以我们只需要在路径前面去手动添加

/wxcomponents/       这个路径就可以正常使用了

  

7.页面中使用，如果没有样式从uniapp重启微信小程序

shmily_yyA
关注
专栏目录
Uniapp引入vant-weapp
Tfishupupup的博客
08-08 4979
vant引入uniapp，引入过程及问题记录
修改后的能够在uniapp项目中使用的 Vantweapp
07-24
解压当前压缩包，直接放在uniapp项目wxcomponents目录 引用即可 修改后的Vantweapp在uniapp项目里使用不会报错 修改里面的px单位为微信小程序里的rpx 已在发布的微信小程序里使用
vant-weapp-uniapp:vant-weapp的uniapp演示（仅微信小工具）
05-09
VantUI Uniapp 示例 本示例原本是从vant官方发布的微信演示示例转换而来,支持微信小程序（H5不支持！！）。 vant-weapp版本为1.6.7. vant weapp的组件库，都在工程的wxcomponents目录下。pages目录下是各个示例页面。 图片上传服务 提供了图片Nodejs服务 ，代码路径为\src\node-image-upload-server 安装npm包 npm install 运行服务 node app 感谢 本示例参考了依据官网增加了新控件的使用示例。 :fire: 更新日志 1.2.2(2021-01-30) 升级版本至1.6.7，增加新功能示例（自定义属性示例），优化原有功能。 1.1.0(2020-04-30) 升级版本至1.2.1，增加新功能示例，优化原有功能。 1.0.0(2020-02-19) 支持H5模式编译。
微信小程序中使用vant组件库（超详细）
热门推荐
阿浩的博客
01-17 2万+
Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。微信小程序版本的Vant组件库是Vant Weapp，其官方文档是我们废话不多说，直接进入主题，在微信小程序中使用Vant Weapp。
Vant Weapp 安装与配置完全指南
最新发布
gitblog_09651的博客
09-13 445
Vant Weapp 安装与配置完全指南 vant-weapp 轻量、可靠的小程序 UI 组件库 项目地址: https://gitcode.com/gh_mirrors/va/vant-weapp ...
uniapp中使用vant-weapp
Gewenjuan_0309的博客
09-14 970
van-button type="info" round block color="#198DEF" @click="onSubmit">登录</van-button>①将通过npm下载的文件夹打开，找到\node_modules\@vant\weapp，其余文件删除，dist保留。# 通过 npm 安装 npm i @vant/weapp -S --production。# 安装 0.x 版本 npm i vant-weapp -S --production。
uniapp导入使用vant-weapp组件
cuilinlong的博客
05-13 2204
将npm或刚下载的文件vant-weapp中的dist文件夹复制到wxcomponents文件夹中，并将dist文件夹重命名为vant。安装完毕后会出现node_modules目录，及vant的weapp文件夹。右键单击项目目录，使用命令行窗口打开所在目录，在终端输入命令，安装vant。方法二：通过GitHub下载vant-weapp，完成后解压。方法一：如果电脑已经安装了node，可以通过npm安装。在项目根目录下创建wxcomponents文件夹。在相应页面中使用vant组件。
uniapp小程序中引入vantweapp
ITshayebuhui的博客
07-07 1038
方式一:可以从github上下载这个插件方式二:使用HBuilderX，“工具”---“插件安装”---“安装新插件”---“前往插件市场安装”---“搜索”，此时插件市场可能为空，修改筛选条件就出来了，使用HBuilderX软件导入。
a uniapp demo for vant-weapp示例.zip
02-04
【描述】"uniapp版的vant微信小程序源码" 表明这个压缩包包含了使用 UniApp 和 Vant WeApp 开发的微信小程序的源代码。通过学习和研究这个源代码，开发者可以了解到如何将这两个工具集成，以及如何利用它们来开发...
vant-weapp1.5.2版本px转rpx后的代码
10-19
然而，Vant WeApp的原始样式文件中的单位大多是px，这可能对在小程序环境中直接使用这些组件造成一些不便，因为小程序推荐使用rpx以实现更好的屏幕适配。 "vant-weapp1.5.2版本px转rpx后的代码"指的是已经完成了这...
uniappp使用 Vant Weapp 组件
weixin_68882321的博客
04-27 791
wxcomponents文件夹目录 再新建vant-weapp目录，把上面 dist 里的东西粘贴过来。"navigationBarTitleText": "登录",1. 使用 git 方式下载最新源码（在项目文件夹下 cmd 打开终端）2. 下载好文件夹后只保留里面 dist 里的东西，复制粘贴就行。// 使用小程序组件。4. 配置全局样式。
在uni-app中使用vant-weapp
Gblfy_Blog
01-05 1231
https://ext.dcloud.net.cn/plugin?id=100
[保姆级教程]在uniapp中使用vant框架
肥晨开发的学习之路
06-21 6350
和Vue.js的版本都在不断更新，因此上述步骤可能会随着版本的更新而有所变化。但是，如果你想要全局引入某个组件（这通常不推荐，因为它会增加你的包大小），你可以在。可能已经内置了类似的工具，或者你可能需要根据你的构建工具进行特定的配置。来按需加载组件，那么你可以不用全局引入样式，而是在每个组件中单独引入。然后，在你的模板部分，你可以像使用普通的Vue组件一样使用。的组件时，Babel会自动为你处理样式和组件的按需引入。根据参考文章和Vant的官方文档，在你的Vue 2.x项目的根目录下，使用npm来安装。
uni-app中使用vant-weapp
Smile_ping的博客
03-12 6088
uni-app中使用Vant-Weapp组件 文章目录uni-app中使用Vant-Weapp组件前提1. 创建wxcomponents文件夹2. pages.json引入组件3. 组件中使用通过`easycom`将其精简为一步关于组件选择 Vant-Weapp官方文档 注意： uni-app 支持在 App 和 小程序 中使用小程序自定义组件，从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。 前提 先下载vant-weapp， 解压文件， 找到dist目录 下载Vant-Wea
Uniapp引入vant-weapp_vant weapp uniapp
u010684174的博客
05-16 667
app.vue引入@import “/wxcomponents/vant/common/index.wxss”;在page.json的globalStyle中引入要用的组件。
uniapp中使用vant wappp
weixin_43837268的博客
04-20 1620
下载Vant Weapp 下载有2种方法： 方法1：克隆Vant Weapp的仓库，运行下面的命令将仓库克隆到本地 git clone https://github.com/youzan/vant-weapp.git 将dist目录复制到uniapp项目的wxcomponents目录中，wxcomponents和components同级，如果没有wxcomponents，自己建一个就行， 修改dist文件夹名称为vant。 方法2：通过npm安装Vant Weapp...
Uni-App开发 导入（引入）Vant-Weapp组件；支持vue3/vue2版本和微信小程序
05-27 1340
操作准备工作，需要确保自己的电脑上已安装Hbuilde和node 全程操作的环境都需要这些配合才能运行上，可参考作者之前写的安装步骤：这两篇文章确保当前电脑环境已存在。
uniapp使用Vant-weapp
05-24
在 Uniapp 中使用 Vant-weapp，需要先将 Vant-weapp 中的组件转化为 Uniapp 中的组件。具体步骤如下： 1. 安装 Vant-weapp 可以通过 npm 或者下载源代码的方式安装 Vant-weapp。这里以 npm 安装为例： ``` npm i ...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值