微信小程序系列——引入第三方组件库vant

前言

在引入之前，需要安装nodejs作为运行环境，具体操作网上可以搜得到！

以引入vant为例：

step1 右键miniprogram，选择“在终端打开选项”

step2 初始化npm

输入npm init，下面的选择都用回车即可

在项目中产生package.json文件即为成功

step3 安装vant

使用命令 npm i vant-weapp -S --production

step4 构建npm

点击微信开发者工具中的“工具”，选择“构建npm”选项

结果：

项目中多出来一个文件夹miniprogram_npm：

step5 使用npm模块

点击开发者工具右上角“详情”，勾选使用npm模块：

step6 测试

在json文件中引入button

{
  "usingComponents": {
    "van-button": "vant-weapp/button"
  }
}

wxml：

按钮 

结果

 

step7 解决问题 

测试过程中出现了问题：

 重复第4步，构建npm就行了！

OK, GAME OVER

体验小程序：

      

更多内容，请关注公众号：程序员高手之路

在公众号回复：小程序资源   即可免费获取以下微信小程序视频教程！