小程序使用第三方UI组件库(mpvue开发模式)

注：该方法为通过mpvue构建的小程序使用第三方UI组件方法

一、安装第三方UI 库

具体UI库的方法请参考UI开的快速上手文档（wux、vant等等），大同小异，以wux UI为例
方法一：通过命令行安装

Using npm

npm i wux-weapp -S --production

Using yarn

yarn add wux-weapp --production

image.png

方法二：通过 GitHub 下载 Wux Weapp 的代码，然后 将下载的项目 packages/lib/ 目录拷贝到自己项目static文件夹中。

二、使用组件

方法一：通过npm 安装的在 src的根目录下的main.js 内添加import wux from 'wux-weapp'

image.png

方法二：通过github 下载的在根目录下的app.json的usingComponents中引用组件，组件路径为上述提到的拷贝到项目内的相对路径
"usingComponents": {
"wux-upload": "static/lib/upload/index",
｝

image.png

在页面内 通过标签使用组件 例如 按钮，下图使用的是upload组件

image.png