在微信小程序中使用第三方ui组件

vant-weapp

安装步骤

安装前确定电脑上安装了 node。 （没有设置淘宝镜像的先设置淘宝镜像，安装速度更快）

设置淘宝镜像：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

• 新建一个微信小程序项目 （在项目的根目录下打开 powerShell）
• npm init
• npm install --production
• npm i vant-weapp -S --production
• 在微信开发者工具中 构建npm ，并在项目设置中把使用npm 包安装的选项勾选上

然后就可以看到在项目的根目录中生成一个node_modules 文件夹，并且生成一个 miniprogram_npm 文件夹。然后在 app.json 或者其他任何页面的 .json 中按需导入想要使用的 UI组件名就可以了。 注意路径的问题

然后根据 vant-weapp 官方文档提供的方法，引入就可以使用了；

例如：index.json 文件中

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

index.wxml 文件中

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

wux-weapp

是一套组件化、可复用、易扩展的微信小程序 UI 组件库。

安装

 npm install wux-weapp -S --production

• 和上面的一样，在微信开发者工具中 构建npm ，并在项目设置中把使用npm 包安装的选项勾选上