一、官网给的文档写的不够充分,需要你充分理解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. css 重点知识 和 bug 解决方法

    1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...

  2. easybcd误删Win10启动项,UEFI恢复引导

    参考文章https://blog.csdn.net/A_Sen_A/article/details/89545311 想给电脑安Ubuntu双系统,期间根据一些不靠谱的文章用了easybcd软件,Ub ...

  3. inux CPU监控分析

    一.vmstat 可对操作系统的虚拟内存.进程.CPU活动进行监控 Procs(进程) r: 运行队列中进程数量,这个值也可以判断是否需要增加CPU.(长期大于1) b: 等待IO的进程数量. Mem ...

  4. FCC---CSS Flexbox: Add Flex Superpowers to the Tweet Embed

    To the right is the tweet embed that will be used as the practical example. Some of the elements wou ...

  5. 教程视频、项目源码、全部干货【微信小程序、React Native、Java、iOS、数据结构】

    把我收藏多年的教学视频.项目源码分享给大家,大神就可以忽略了,很多东西都是基础性的,都是期初学习阶段收集的东西. 微信小程序(入门级,有web前端基础的人群): 链接: https://pan.bai ...

  6. FloatingActionButton动态更换背景色

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/186 FloatingActionButton 动态更换背 ...

  7. orm终极大爆炸

    orm终极 甩一个代码给你 # 创建字段 class Field: def __init__(self, name, column_type, primary_key, default): self. ...

  8. [Go] 解决golang.org模块无法下载的问题

    使用GOPROXY环境变量解决proxy.golang.org无法访问问题 在/etc/profile中增加 export GOPROXY=https://goproxy.cn windows下使用 ...

  9. 如何将pyqt5的qt-designer设计出来的 .ui 和 .qrc 文件转化成 .py 文件

    一.pyrcc5的使用 1.1 作用 将 .qrc 资源文件转换成py文件,并在主程序中通过 import 引入 1.2 资源文件编写说明 创建一个icon.qrc,代码如下: <RCC> ...

  10. 关于使用宏将csv批量转换成xls的分享

    最近在使用遇到一个问题需要把csv格式的文件转成xls,随便新建一个excel,然后打开,选择“开发工具”,找到下图“宏”,如果跟下图一样的话就需要先启用宏,启用之后可以直接把下面的代码直接复制到代码 ...