小程序中使用第三方UI组件-VANT

看了几天的小程序文档，大体上有所了解了，如果你想快速学习小程序，最好有vue.js的功底，且至少了解一些框架原理，或者VUE很熟练才会快速吸收，否则还是有些迷糊。

琢磨了几天，开始动手创建自己的页面，今天尝试着把vant ui接入进来，前两天一直是按照官方文档操作，结果失败，结果今天突然构建成功了，所以分享出来，大佬请绕行。

小程序不像VUE，可以通过npm来安装第三方组件，所以需要【构建NPM】，所谓的构建NPM，我的理解就是把生产的文件，转成小程序自己的文件，初期没啥经验，只能照猫画虎，步骤如下：

1 创建好自己的小程序项目，具体看官网

2 打开cmd，进入你的项目中，在cmd中执行：npm init，初始化项目，可按照自己的情况填写每一项，具体每项内容不再说了，如下图，可以一直回车

 

创建完成后，项目目录中就多了一个熟悉的【package.json】文件。

3 执行：npm install --production

4 执行：npm i vant-weapp -S --production，安装vant weapp ui。请注意后面要有【--production】参数。到此步时，vant ui就算安装完毕了，你的目录也变成了如下

有点像我们的vue.js项目了，接下来就是重点了，我们要把安装好的vant，通过【构建npm】提出来

5 打开小程序客户端，选择【工具】菜单 -> 选择【构建 npm】命令，当你点击后，程序会自动构建，直到弹窗提示，构建完成，如图

此时，再次观察你的项目目录，又多出了一个文件夹【miniprogram_npm】，打开后，你可以发现，里面全是vant ui的组件文件，比如下图的button组件

到此，安装vant ui就算完成了，接下来就是像使用【自定义组件】一样使用了，如

1 打开页面（index）的json文件，如下

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

2 打开wxml，引入组件代码，即可

  <van-button type="default">默认按钮</van-button>
  <van-rate v-model="value" />

大功告成，接下来，愉快的开发吧！