微信小程序导入VantUI踩坑实录

  最近在学习微信小程序的使用，腾讯提供的原生控件已经可以满足大部分需求，但是目前很多效果以及控件没有办法满足当前需求，所以引入第三方就显得十分必要了。我这里引入的是第三方VantUI。在用vue写移动web的时候，踩了许多坑，所以这个第三方使用起来最为顺手。好在微信小程序目前最新的开发工具已经支持npm了，这无形中给我们提供了很大方便，但是配置起来我还是踩了很多坑，这里给大家出一个“踩坑实录”，旨在抛砖引玉。

  首先，第一步，新建项目：

  

项目名称大家随意。

第二步，按照微信小程序官方文档需要在小程序根目录下执行 （https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html）

npm install --production

但是我这边始终执行报错，仔细研究了一番报错，才发现是没有初始化项目，导致没有package.json文件导致报错。所以首先执行npm init 命令（信息都用默认的即可，一路回车到头）：

第三步，执行官方要求的命令：

npm install --production

这里就安装成功了，环境准备好了，下面才是导入vantUI的步骤：

第四步：执行VantUI提供的安装命令：

npm i vant-weapp -S --production

这里我是用的是推荐的方式一，但是还是踩了坑（下面会继续说到）

第五步，启用npm，如图所示：

第六步，构建npm：

成功之后显示，并且可以看到多了一个：miniprogram_npm 目录（这里就是安装好的VantUI相关控件）：

好的，这里我们就可以使用VantUI控件了，但是这里还有一些坑，我这边开始的时候一直报vantUI找不到控件的异常，仔细研究才发现npm需要更新了（确实版本比较老），执行命令：  npm install -g npm  

第七步，使用VantUI控件，首先进行导入：

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

接下来使用控件：

可以看到，VantUI中的控件已经展示出来了！网上相关文章比较老旧，所以只能自己踩坑，现在分享出来，希望可以帮到大家！