一、安装nodejs
参考网址
下载node的网址：http://nodejs.cn/download/
node安装及配置的网址：https://blog.csdn.net/JingYan_Chan/article/details/125405423
1.下载node.js
网址：http://nodejs.cn/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.org 配置镜像站。
输入命令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 中直接使用组件文章来源：https://www.toymoban.com/news/detail-495703.html
<van-button type="primary">按钮</van-button>
可以看到引入vant组件成功了
文章来源地址https://www.toymoban.com/news/detail-495703.html
到了这里，关于微信小程序开发引入vant框架（步骤详细，供学习的同学们参考）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
