小程序引入vant组件（已解决）

素颜马尾好姑娘i 2021-10-25 13:36 529阅读 0赞

第一步：首先要看小程序是否有package.json文件，有的话可以往下走，没有的话，需要先执行`npm init`写入package.json文件

第二步：`npm i vant-weapp -S --production` ，接着点击工具的构建npm

第三步：

在https://github.com/youzan/vant-weapp下载一份vant压缩包，  
把小程序miniprogram\_npm/vant-weapp里的组件文件夹都删除，  
将压缩包dist文件夹（vant-weapp-dev\\vant-weapp-dev\\dist）下的文件复制到 miniprogram\_npm/vant-weapp（即下载一份vant，之后换掉项目中的文件）

[原文链接][Link 1]  
谢谢密切饭后的解决方案，以此记录方便下次使用。

使用方法：

"usingComponents": {
        "van-button": "../../miniprogram_npm/vant-weapp/button/index"
      },

文件目录如下：  
![在这里插入图片描述][20190821090901416.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]

[Link 1]: http://www.imooc.com/qadetail/314242?t=493667
[20190821090901416.png]: /images/20211025/b35818c1a4734037997ebd2ec09bb96b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]: /images/20211025/1eefde2068a8474d82b5e7983768c2db.png

发表评论取消回复

表情：

评论列表（有 0 条评论，529人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序快速引入vant-weapp组件库（适合小白）

阅读本篇文章之前，相信你已经对小程序有了很深刻的认知及了解。 * 小程序官方npm使用介绍[点击直达][Link 1] * vant-weapp组件库安装官方介...

野性酷女/ 2024年04月19日 11:17/ 0 赞/ 44 阅读

相关【小程序】Vant组件库和Promise化

目录使用 npm 包使用 npm 包 - Vant Weapp 1. 什么是 Vant Weapp 2. 安装 Vant 组件库 3. 使用 Vant 组件

冷不防/ 2024年03月30日 12:09/ 0 赞/ 81 阅读

相关 vue-cli项目下引入vant组件

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

Myth丶恋晨/ 2023年08月17日 15:39/ 0 赞/ 137 阅读

相关 uni-app引入UI组件库(Vant-weapp)

uni-app引入UI组件库(Vant-weapp) 1. 新建相关目录根目录下创建 `wxcomponents` wxcomponents下新建`van

素颜马尾好姑娘i/ 2023年05月28日 12:57/ 0 赞/ 148 阅读

相关微信小程序引入 vant UI组件库

实现步骤： 1、首先在项目根目录下创建一个 miniprogram 文件夹 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

朱雀/ 2023年02月22日 14:58/ 0 赞/ 1 阅读

相关小程序接入vant Weapp组件的详细步骤

大家好，我是[小佑@小佐：https://blog.csdn.net/Smell\_rookie][https_blog.csdn.net_Smell_rookie]，是一名页

红太狼/ 2022年12月18日 07:56/ 0 赞/ 230 阅读

相关【小程序实战】echarts以及vant组件的使用

一、效果呈现 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

冷不防/ 2022年11月25日 11:41/ 0 赞/ 543 阅读

相关【健康云平台练习小项目开发】小程序vant组件库的引入

一、背景 > 这是本人的参与的一个省级大创项目的系统开发部分。本人于2020年暑假已开发简单的基本框架（包括vue、小程序、ssm框架（spring boot迭代）），由于各

淩亂°似流年/ 2022年11月12日 08:28/ 0 赞/ 189 阅读

相关微信小程序引入vant封装tabbar

1、先创建一个custom-tab-bar文件夹，然后在微信开发者工具里面找到该文件夹，点击右键新建一个component； ![在这里插入图片描述][watermark_

冷不防/ 2022年10月12日 01:41/ 0 赞/ 126 阅读

相关小程序引入vant组件（已解决）

第一步：首先要看小程序是否有package.json文件，有的话可以往下走，没有的话，需要先执行`npm init`写入package.json文件第二步：`npm i v

素颜马尾好姑娘i/ 2021年10月25日 13:36/ 0 赞/ 530 阅读