微信小程序开发引入vant框架（步骤详细，供学习的同学们参考）

一、安装nodejs

参考网址
下载node的网址：http://nodejs.cn/download/
node安装及配置的网址：https://blog.csdn.net/JingYan_Chan/article/details/125405423

1.下载node.js
网址：http://nodejs/download/

下载后直接安装，安装到其他盘，本次示范安装到【D:\RJ\nodejs】盘
2.安装好后配置环境变量
右击【此电脑】——【属性】


在用户变量中点击【新建】
变量名输入【NODE_PATH】
变量值输入nodejs的安装地址【D:\RJ\nodejs】

在用户变量的path中，输入 【%NODE_PATH%】，然后点击确定即可

至此，nodejs环境配置完毕。

3、打开CMD，检查是否正常path路径是否正常。
win+R，输入cmd打开命令行，输入下面语句。

echo %PATH%

出现如图内容，证明环境配置完成。

4、安装完成后测试下nodejs和npm是否安装成功。
在终端中输入以下两条命令语句：

node -v

npm -v

此时，nodejs和npm已安装完毕。

5、npm配置
先配置npm的全局模块的存放路径以及cache的路径
在nodejs下建立"node_global"及"node_cache"两个文件夹。

备注：为防止运行cmd命令出错，可设置这两个文件夹属性


文件属性设置好后，运行命令
在终端运行以下两条命令语句，如图所示：

npm config set prefix "D:\RJ\nodejs\node_global"
npm config set cache "D:\RJ\nodejs\node_cache"

如果运行没问题，如下图所示，输入指令，干净利索：

输入命令npm config set registry=http://registry.npm.taobao 配置镜像站。
输入命令npm config list 显示所有配置信息。
检查一下镜像站。输入以下两行命令语句：

npm config get registry
npm info vue 

运行成功后：
增加环境变量NODE_PATH 内容是：D:\RJ\nodejs\node_modules，
对path环境变量添加D:\nodejs\node_global


到此node.js安装成功

二、在微信小程序开发中引入vant框架

参考网址（vant官网）：
https://vant-contrib.gitee.io/vant-weapp/#/quickstart
微信开发文档，可在里面下载微信小程序开发安装包
https://developers.weixin.qq.com/miniprogram/dev/framework/

注意点：
（1）需安装微信小程序开发软件比较新的版本，建议安装最新版本
（2）小程序开发软件安装好后建议用管理员身份运行打开
如下图所示：

先新建小程序项目


1、 通过 npm 安装vant框架（在命令行中输入）

npm i @vant/weapp -S --production

若小程序底部调试器的终端中无法输入，则可换另外的方法输入

可在外部终端中安装vant框架

打开后需要切换小程序demo存放的路径
然后输入命令，命令执行成功后，可看见小程序文件中多了两个json文件

2、修改 app.json
将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3、修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可
4、构建 npm 包

若出现这个错误提示，则需要在根目录下建立miniprogram文件夹


然后再点击【工具 -> 构建 npm】，构建成功提示如下


构建成功后会在【miniprogram】文件夹中生成很多文件

新的开发版本中，详情——本地设置中没有【使用 npm 模块勾选框选项】，则不用理会，如果有则需勾选

不同开发版本会有点区别：

5、引入组件
以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。
所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

引入组件保存后在控制台中看到错误信息

需从根目录引入组件，路径对了，控制台便不会报错

使用组件
引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

可以看到引入vant组件成功了