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

一、安装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 中直接使用组件

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

可以看到引入vant组件成功了
在这里插入图片描述

  • 31
    点赞
  • 92
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值