小程序安装第三方组件库 如：vant

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-yi-tong-guo-npm-an-zhuang

vant 小程序组件库

第一步 先npm init 回车 初始化新建package.json文件包

如果微信开发者工具无法输入命令 打开cmd面板 cd d:/ 进入目录 cd users 知道进入小程序项目目录输入命令

第二步 ## 安装

将 app.json 中的 "style": "v2" 去除，小程序的 新版基础组件 强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

开发者工具创建的项目， miniprogramRoot 默认为 miniprogram ， package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

打开微信开发者工具，点击 工具 ->构建 npm ，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

如果你使用 typescript 开发小程序，还需要做如下 *** 作，以获得顺畅的开发体验。

请将 path/to/node_modules/@vant/weapp 修改为项目的 node_modules 中 @vant/weapp 所在的目录。

使用时：

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#yin-ru-zu-jian

vant小程序使用说明文档

在 app.json 或 index.json 中引入组件，详细介绍见 快速上手 。

"usingComponents": {

"van-button": "@vant/weapp/button/index"

}

iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。

商城小程序必备的数字输入框。

在 .json 中引入组件

在 .wxml 中引入

下面是运行的效果，总的来看还是不错的。

还有个常用的动作面板。

从底部d出的模态框，提供和当前场景相关的 2 个以上的 *** 作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

在 .json 中引入组件

在 .wxml 中引入组件

这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：

总的来讲 iview 还比较好看的。

更多用法去参考： https://weapp.iviewui.com/

另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具

---