微信小程序开发者工具构建npm提示没找到node_modules目录

一、官网给的文档写的不够充分,需要你充分理解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目录的更多相关文章
- 微信小程序没找到构建npm或者没找到node_modules目录以及如何在小程序中引入vant weapp组件
微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init ...
- 从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计
使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能 ...
- 从微信小程序开发者工具源码看实现原理(四)- - 自适应布局
从前面从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计可以知道,小程序大部分是通过web技术进行渲染的,也就是最终通过浏览器的dom tree + cssom来生成渲染树:既然最终是通 ...
- 解决微信小程序开发者工具输入框焦点问题
Windows10笔记本上运行微信小程序开发者工具,输入框(input,textarea)没有焦点,只能在真机调试,效率太低.后来发现是Window10对笔记本高分屏支持不好,要DPI缩放,导致兼容性 ...
- 从微信小程序开发者工具源码看实现原理(二)- - 小程序技术实现
wxml与wxss的转换 1.wxml使用wcc转换 2.wxss使用wcsc转换 开发者工具主入口 视图层页面的实现 视图层页面实现技术细节 视图层快速打开原理 视图层新打开页面流程 业务逻辑层页面 ...
- 从微信小程序开发者工具源码看实现原理(三)- - 双线程通信
文章概览: 引言 小程序开发者工具双线程通信的设计 1.on: 用来收集小程序开发者工具触发的事件回调 2.invoke:以api方式调用开发工具提供的基础能力 3.publish:用来向Appser ...
- 微信小程序开发者工具详解
一.微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址. 1.2 下载后安装一下就可以使用了: 二.创建项目 2.1 微信小程序web开发工具需要扫码登陆,所以 ...
- 微信小程序开发者工具更新后报很多错误
很有可能是不小心改动微信开发者工具的基础库版本了, 在文件 project.config.json 中 "libVersion": "2.9.3", 变成 &q ...
- 微信小程序开发者工具集合包
开发论坛 http://www.henkuai.com/forum-56-1.html 工具包下载 https://yunpan.cn/ckXFpuzAeVi2s 访问密码 b4cc 开发文档 h ...
随机推荐
- CentOS7 下nginx与PHP的安装与配置
下载Nginx 1.在服务器上新建文件夹 /home/soft/ ; 2.cd /home/soft/ => 执行命令下载Nginx wget http://nginx.or ...
- leetcode——二分
(1)4. 寻找两个有序数组的中位数(中) https://leetcode-cn.com/problems/median-of-two-sorted-arrays/ 给定两个大小为 m 和 n 的有 ...
- SQL Server 2012 官方版 / SQL Server 2012下载
SQL Server是微软的一款专业免费的关系数据库管理工具, 是一个全面的数据库平台,使用集成的商业智能 (BI)工具提供了企业级的数据管理服务,SQL Server 数据库引擎为关系型数据和结构化 ...
- Linux ipv6 无状态 设置为 eui64
Linux ipv6 无状态 设置为 eui64 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-08-22. 无状态的ipv6有eui64和stable-privacy模式, 在家 ...
- 2019 Vue开发指南:你都需要学点啥?
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://dzone.com/articles/vue-development-in-2019 ...
- 数据安全管理:RSA加密算法,签名验签流程详解
本文源码:GitHub·点这里 || GitEE·点这里 一.RSA算法简介 1.加密解密 RSA加密是一种非对称加密,在公开密钥加密和电子商业中RSA被广泛使用.可以在不直接传递密钥的情况下,完成加 ...
- FineUICore基础版部署到docker实战
FineUI用了好多年,最近出了FineUICore版本,一直没时间是试一下docker,前几天买了一个腾讯云服务器,1核2g,装了centos7.6,开始的时候主要是整个个人博客,在腾讯云安装了宝塔 ...
- Git实战指南----跟着haibiscuit学Git(第八篇)
笔名: haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...
- 网站后台getshell
phpmyadmin后台Getshell 获取 web 绝对路径 select @@basedir; 检测是否有写入权限 show global variables like 'secure%' ## ...
- CCPC 2019 秦皇岛 Angle Beats
题目 给出P个点,然后给出Q个询问,问从P中选出两个点和给的点能组成直角三角形的方法个数.-O2,时间限制5秒. \[2\leqslant P\leqslant 2000,\qquad 1\leqsl ...