微信小程序开发者工具构建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 ...
随机推荐
- leetcode菜鸡斗智斗勇系列(3)--- Jewels and Stones珠宝和钻石
1.原题: https://leetcode.com/problems/jewels-and-stones/ You're given strings J representing the types ...
- CodeForces - 519D(思维+前缀和)
题意 https://vjudge.net/problem/CodeForces-519D 给定每个小写字母一个数值,给定一个只包含小写字母的字符串 s,求 s 的子串 t 个数,使 t满足: 首位字 ...
- C++之new关键字
我们都知道new是用来在程序运行过程中为变量临时分配内存的C++关键字,那它跟C语言中的malloc有什么区别呢,相比之下又为什么推荐使用new呢 c++ throwing() void* opera ...
- Cordova搭建,所遇到问题处理
环境:NodeJs.[Android SDK | IOS] 安装:npm install -g cordova 过程: 1.创建一个项目:cordova create myApp 2.选择平台: co ...
- 【zabbix部署】基于linux安装zabbix监控服务和被监控服务
环境配置 zabbix_server:10.0.0.1 zabbix_agentd:10.0.0.1,10.0.0.2(暂定) 操作系统:centos7.6 安装环境配置 1. LNMP环境 zabb ...
- 字节跳动——IT技术工程师面试题
.自我介绍 .项目介绍 .争对个人项目进行提问 .场景模拟 .1如何知道用户的指定视频(类似于QQ发视频)的服务是正常的 .使用appum进行自动化测试 .使用bat脚本获取进程状态,然后定时发送em ...
- ionic项目使用Google FCM插件和Google maps插件打包android报错冲突问题
这段时间在调FCM推送服务的插件 ,原本以为去年调通过,应该很容易,没想到还是出问题了.现将问题及解决方法整理如下,仅供参考: 先看打包报错截图: 详细报错信息:Please fix ...
- iOS正则表达式解决实际问题
问题:上海市徐汇区桂林路158号1202室 字符串长度不固定,数字长度也不固定.截取第二组数字. 方法一:[正则表达式] NSString * str = @"上海市徐汇区桂林路158号12 ...
- 追踪SQL Server执行delete操作时候不同锁申请与释放的过程
一直以为很了解sqlserver的加锁过程,在分析一些特殊情况下的死锁之后,尤其是并发单表操作发生的死锁,对于加解锁的过程,有了一些重新的认识,之前的知识还是有一些盲区在里面的.delete加锁与解锁 ...
- phpStorm+xdebug调试(php7.3)
一.首先安装xdebug 安装xdebug比 ,运行php -i >phpinfo.txt 或者 echo phpinfo();将全部信息贴到https://xdebug.org/wizard. ...