一、官网给的文档写的不够充分,需要你充分理解npm的使用方法,才能明白的;

二、第一步:先在你电脑上安装npm 参考下面文章

https://www.cnblogs.com/zmdComeOn/p/11543441.html

三、第二步:

1、第一步:打开终端 cd 到项目目录下 输入如下命令npm init 如下图所示

    

   输入命令后一直点回车,如下图:

    

2、第二步:输入如下命令 npm install --production

3、第三步:输入如下命令 npm i vant-weapp -S --production  (此命令为要构建的代码包,如果想构建其他代码包,只需输入其他对应的命令即可)

  如下图里面有的两个包构建的文件 命令分别如下 (npm i miniprogram-sm-crypto --production 和 npm i vant-weapp -S --production  和  npm install weui-miniprogram --save --production)

  

四、还要注意一点就是微信开发者工具要更新到最新版本,不然点击工具没有构建npm这一栏,

执行命令完之后,然后再去微信开发者中点工具-构建npm

  

然后就成功了,如下图:

五、下面以引入button组件到某页面为例子:

在此页面的.json中配置

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

然后在此页码的wxml中

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

重新编译项目 发现 已经正常引用了!下面是vant-weapp文档教程

六、vant-weapp使用教程文档 https://youzan.github.io/vant-weapp/#/quickstart

微信小程序开发者工具构建npm提示没找到node_modules目录的更多相关文章

  1. 微信小程序没找到构建npm或者没找到node_modules目录以及如何在小程序中引入vant weapp组件

    微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init ...

  2. 从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计

    使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能 ...

  3. 从微信小程序开发者工具源码看实现原理(四)- - 自适应布局

    从前面从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计可以知道,小程序大部分是通过web技术进行渲染的,也就是最终通过浏览器的dom tree + cssom来生成渲染树:既然最终是通 ...

  4. 解决微信小程序开发者工具输入框焦点问题

    Windows10笔记本上运行微信小程序开发者工具,输入框(input,textarea)没有焦点,只能在真机调试,效率太低.后来发现是Window10对笔记本高分屏支持不好,要DPI缩放,导致兼容性 ...

  5. 从微信小程序开发者工具源码看实现原理(二)- - 小程序技术实现

    wxml与wxss的转换 1.wxml使用wcc转换 2.wxss使用wcsc转换 开发者工具主入口 视图层页面的实现 视图层页面实现技术细节 视图层快速打开原理 视图层新打开页面流程 业务逻辑层页面 ...

  6. 从微信小程序开发者工具源码看实现原理(三)- - 双线程通信

    文章概览: 引言 小程序开发者工具双线程通信的设计 1.on: 用来收集小程序开发者工具触发的事件回调 2.invoke:以api方式调用开发工具提供的基础能力 3.publish:用来向Appser ...

  7. 微信小程序开发者工具详解

    一.微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址. 1.2 下载后安装一下就可以使用了: 二.创建项目 2.1 微信小程序web开发工具需要扫码登陆,所以 ...

  8. 微信小程序开发者工具更新后报很多错误

    很有可能是不小心改动微信开发者工具的基础库版本了, 在文件 project.config.json 中 "libVersion": "2.9.3", 变成 &q ...

  9. 微信小程序开发者工具集合包

    开发论坛 http://www.henkuai.com/forum-56-1.html 工具包下载  https://yunpan.cn/ckXFpuzAeVi2s  访问密码 b4cc 开发文档 h ...

随机推荐

  1. ConcurrentHashMap源码走读

    目录 ConcurrentHashMap源码走读 简介 放入数据 容器元素总数更新 容器扩容 协助扩容 遍历 ConcurrentHashMap源码走读 简介 在从JDK8开始,为了提高并发度,Con ...

  2. Dynamic Code Evaluation:Unsafe Deserialization 动态代码评估:不安全反序列化

  3. 数据库查询 - DataTable转Entity类型数据

    当使用Sql语句查询数据库,返回DataSet数据集. DataSet转化为数据列表,可以通过映射方式直接返回Entity数据列表 新建一个特性类,用于数据库列表列名称映射 LinqToDB提供了一个 ...

  4. Java实现抢红包功能

    采用多线程模拟多人同时抢红包.服务端将玩家发出的红包保存在一个队列里,然后用Job定时将红包信息推送给玩家.每一批玩家的抢红包请求,其实操作的都是从队列中弹出的第一个红包元素,但当前的红包数量为空的时 ...

  5. android 引入一个布局库后该有的操作

    背景 引入一个布局库:com.zhy:percent-support-extends 然后sync now 成功了,也就是同步成功了. 然而开始使用的时候报告了: The following clas ...

  6. 图像的相似度Hash算法

    Hash算法有三种,分别为平均哈希算法(aHash).感知哈希算法你(pHash)和差异哈哈希算法(dHash). 针对以上三种的Hash算法详解见博客园文章 https://www.cnblogs. ...

  7. sql server日期转换为dd-mon-yyyy和dd-MMM-yyyy这样的英文月份格式(27-Aug-2019)

    脚本: /* 功能:sql server日期转换为dd-mon-yyyy和dd-MMM-yyyy这样的格式 示例:27-Aug-2019 作者:zhang502219048 脚本来源:https:// ...

  8. 池化技术(一)Druid是如何管理数据库连接的?

    基于依赖程序的版本信息:druid:1.1.16               驱动程序mysql-connector-java:8.0.17 下一篇:HikariCP是如何管理数据库连接的 零.类图& ...

  9. Charles 使用笔记

     一.介绍 Charles 属于抓包软件. Charles 多平台支持,mac.windows.linux. Charles 是收费软件,可以免费试用 30 天.试用期过后,未付费的用户仍然可以继续使 ...

  10. mySql中Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre的问题

    报错信息 Expression #2 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'a.id' ...