小程序使用npm引入第三方UI，经常出现错误，没有node_modules,导致无法引入第三方UI等
正确操作应该是：
先新建一个小程序项目，初始化npm项目
npm init
执行成功，会生成一个package.json 文件
{
"name": "weapp-hotel",
"version": "1.0.0",
"description": "A Wechat Small programming : weapp-hotel",
"main": "app.js",
"scripts": {
"test": ""
},
"repository": {
"type": "git",
"url": "https://gitee.com/wangslei/weapp-hotel.git"
},
"keywords": [
"weapp-hotel"
],
"author": "wangsl",
"license": "ISC",
"dependencies": {}
}
下来生成package-lock.json，记录使用的第三方插件
npm install --production
内容如下
{
"name": "weapp-hotel",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {}
}
}
接着引入第三方组件
npm i vant-weapp -S --production -verbose
此处请务必使用–production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。
-verbose 是为了输出详细信息（可以不要），英文翻译是 冗余 的意思
然后点击工具 => 构建npm
最后会在项目目录中生成这样的目录
勾选“使用 npm 模块”选项：
引用UI组件
有赞让我们这样使用
{
"usingComponents": {
"van-button": "/path/to/vant-weapp/dist/button/index"
}
}
对于我们的项目我们改成自己的目录
{
"usingComponents": {
"van-button":"/miniprogram_npm/vant-weapp/button/index"
}
}
但是运行时我们会发现会报错
这个需要添加一个目录dist
这样引用第三方组件就OK了！
最后推荐几个不错的第三方UI组件库
1. WeUI WXSS
WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。
GitHub地址：https://github.com/Tencent/weui-wxss
npm下载：npm i weui-wxss
2. iView WeApp
iView是TalkingData发布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小程序版本。
GitHub地址：https://github.com/TalkingData/iview-weapp
npm下载：npm i iview-weapp
3. ZanUI WeApp
ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。
现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。
GitHub地址：https://github.com/youzan/vant-weapp
npm下载：npm i zanui-weapp
另外，zanui也使用 mpvue 重写 zanui-weapp，实现了其中所有组件。
GitHub地址：https://github.com/samwang1027/mpvue-zanui
npm下载：npm i mpvue-zanui
4. MinUI
MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具。
GitHub地址：https://github.com/meili/minui
5. Wux WeApp
Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库，组件比较丰富，值得使用。
GitHub地址：https://github.com/wux-weapp/wux-weapp
npm下载：npm i wux-weapp
