NODE安装+微信开发者导入Vantweapp

背景

由于学校比赛的需要，我需要和另外三个小伙伴共同开发一个微信小程序。由于相关经验为0，所以只能摸着石头过河。听说vantweapp比较方便使用，现在将自己从0到有的经验与各位分享。（其实是要给组员分享，所以顺便写一下博客）

Node的安装

1.相关网站及其借鉴

在看这篇博客之前，建议所有的命令在cmd下输入时，都以管理员的权限运行，并且在阅读该博客时，步骤10可以参考第二篇参考博客“Node环境配置”

Node安装博客介绍

安装成功后的效果为下图所示

 但是虽然上面这个博客的步骤10是说可选的，但是根据下面这篇博客

Node环境配置

为了更好的管理下载依赖，需要进行环境配置。“因为NodeJS在执行安装语句时，会将安装的模块默认安装到**C:\Users\用户名\AppData\Roaming\npm**，从而占用C盘的空间。”（摘自该博客）

2.易错：

在使用此方法时，最好使用管理员权限。而使用管理员权限的一个简便方法是：

通过在搜索框中输入cmd，在点击以管理员身份运行即可。

当然，对于Win10可以用的方法还有很多，可以参考：Win10使用管理员权限打开cmd

在安装完成后，可以使用node -v检测是否安装成功

最后的提醒是可以多尝试重启cmd，有时候会有意想不到的效果

成功实现：

微信小程序中Npm的安装

参考视频：vantweapp的安装教程

参考官方文档：

npm支持

vant-weapp快速上手

安装命令：npm install

但是在npm安装过程中，会经常出现一个错误：

npm ERR! errno -4048，Error: EPERM: operation not permitted

这个的解决方法有两种：

方法1：删除npmrc文件。

强调：不是nodejs安装目录npm模块下的那个npmrc文件

而是在C:\Users\{账户}\下的.npmrc文件。同时需要提醒的是记得多找找该.npmrc文件，笔者就是应该太过自信，没有细看，以为自己的没有该文件。绕了一大圈子，还是找到了该文件，删掉后成功解决

方法2：使用清楚命令

指令1：

npm cache clean --force

指令2：

npm cache verify

相同的提醒：使用命令后需要重新打开cmd，再进行实验

经过使用这两种方法，如果还是不能安装好npm或者无法导入vant_weapp，可能是网不好，因为npm默认的镜像地址为国外镜像地址（当然如果能安装就可以跳过以下步骤了）

npm config get registry

所以需要安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com/

这个需要注意的是http://npm.taobao.org 和 http://registry.npm.taobao.org 将在 2022.06.30 号正式下线和停止 DNS 解析。

参考博客：淘宝 npm 域名即将切换

cnpm -v
//可以得到相应版本
cnpm config get registry
//得到对应的网站

之后既可以使用npm或者cnpm命令进行安装了 

这样就代表成功安装完成啦，接下来就是在微信开发工具上使用npm，并且导入vantweapp了。

导入vantweapp 

 需要查看vant的官方文档vant-weapp快速上手和微信小程序开发文档npm对于npm的介绍

关键步骤是：

1.执行命令：npm init -y

2.执行命令：npm install @vant/weapp -S --production

3.操作：构建npm

常见的错误有以下几个：

1.安装失败：可能是网络问题，检查cnpm是否安装成功

2.构建失败：npm ERR! errno -4048，Error: EPERM: operation not permitted

参考之前的处理办法

3.其他错误：检查是否跟随了官方文档的指南 以及参考之前提供的视频链接

已有项目导入Vantweapp

如果是在已经有的项目中导入Vantweapp，所采取的步骤为：

1. 打开cmd，使用管理员权限，找到项目目录，使用命令：npm init -y初始化生成package.json文件
2. 按照vant的官方文档进行导入：vant-weapp快速上手

     如果上述步骤不能成功，再考虑尝试以下步骤

     3.下载完成之后，将其中的dist文件夹放到miniprogram_npm文件夹下的vant-weapp文件夹里面

     4.在对应页面的json文件中引入，不要按官方的写法。官方是这么写的：

{  

"usingComponents": {"van-button": "/path/to/vant-weapp/dist/button/index"} }

我们将其改为自己的路径

"usingComponents": {

"van-button": "/miniprogram_npm/vant-weapp/dist/button/index"

}

参考博客：小程序vant引入