小程序之npm引入第三方UI

官方对npm的使用介绍

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

可能会出现错误，没有node_modules,导致无法引入第三方UI等

具体正确操作应该是：

先新建一个小程序项目

# 在终端打开项目，执行命令
npm init

这样就初始化的npm项目。

# 接下来生成package-lock.json，记录使用的第三方插件
npm install --production

内容如下

{
  "name": "weixin_coder",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "vant-weapp": {
      "version": "0.4.8",
      "resolved": "http://registry.npm.taobao.org/vant-weapp/download/vant-weapp-0.4.8.tgz",
      "integrity": "sha1-CxF2lWnm8jrP8Qpl+9n4R5BJZS0="
    }
  }
}

接着引入第三方组件

npm i vant-weapp -S --production

引入得是有赞的UI组件，感觉不错。

结果图

然后点击工具 => 构建npm

最后会在项目目录中生成这样的目录

引用UI组件

有赞让我们这样使用

{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}

对于我们的项目我们改成自己的目录

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

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

但是运行时我们会发现会报错

这个需要添加一个目录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