当前位置: 首页> 汽车> 报价 > Uni-App开发 导入(引入)Vant-Weapp组件;支持vue3/vue2版本和微信小程序

Uni-App开发 导入(引入)Vant-Weapp组件;支持vue3/vue2版本和微信小程序

时间:2025/7/11 0:26:15来源:https://blog.csdn.net/weixin_61958028/article/details/139232479 浏览次数: 0次

文章目录

  • 目录

    文章目录

    操作流程

    小结


    • 概要
    • 安装流程
    • 技术细节
    • 小结

概要

Vant Weapp官网:Vant Weapp - 轻量、可靠的小程序 UI 组件库

准备工作,需要确保自己的电脑上已安装Hbuilde和node  全程操作的环境都需要这些配合才能运行上,可参考作者之前写的安装步骤:这三篇文章确保当前电脑环境已存在

Vue脚手架安装和部署 搭建本地的Node.js服务_vue配置node.js-CSDN博客

Windows 11 HBuilder X的安装和环境搭建教程-CSDN博客

微信开发者工具需要安装

操作流程

官方文档里有这个步骤安装文档

在当前项目下直接运行这个命令

# 通过 npm 安装
npm i @vant/weapp -S --production

运行成功项目目录下,出现如图所示的目录文件

修改好的文件名

配置教程

@import "wxcomponents/vant/common/index.wxss"

运行在微信开发者工具

效果图

官方文档

技术细节

小结

如果需要使用其他组件,需要在添加后面逗号隔开在补充上就行

保存成功之后,查看官网文档的代码复制

效果图

问题集

1.运行没有效果需要注意检查细节问题,是否已保存。

2.引入全局组件再试下。

欢迎关注作者公众号提问题

关键字:Uni-App开发 导入(引入)Vant-Weapp组件;支持vue3/vue2版本和微信小程序

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: