微信小程序npm安装有赞UI 组件库

微信小程序可以npm安装UI组件库，文档位置：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

npm需要先安装node，直接到https://nodejs.org/en/，下载安装node即可使用npm了。

然后到小程序自己目录下打开cmd。

记住步骤不要错：

第一步：npm init

然后一直回车，喜欢填也可以填版本资料等。

第二步：npm install --production

有赞的UI组件库：https://github.com/youzan/vant-weapp

第三步：执行：npm i @vant/weapp -S --production 安装有赞UI

然后自己小程序目录下多了一个node_modules目录，里面就是自己刚下载的@vant有赞的一些UI组件。

找到这个工具——构建npm。便会在自己小程序目录下生成miniprogram_npm目录。比如想使用按钮 ，就在miniprogram_npm\@vant\weapp\button中。

在详情中，选上使用npm模块。

以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可:

{
  "usingComponents": {"van-button": "@vant/weapp/button/index"},
  "navigationBarTitleText": "社区",
  "enablePullDownRefresh": true
}

接着就可以在 wxml 中直接使用组件:

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