1、初始化package.json
再利用npm安装第三方组件库前,需要通过
npm init -y
来初始化package.json文件
- 需要注意的是:使用npm init -y的前提是项目所在目录不得包含中文
- 若包含中文,不得加"-y",需要通过提示手动初始化
2、安装所需组件库
以vant为例,可参照官方文档进行安装
如:npm i @vant/weapp
3、勾选"使用npm模块"
在使用组件之前,需要在详情的“本地设置”中勾选“使用npm模块”:
4、对node_modules中的包进行转换
需要对node_modules中下载的包进行转换,转换成小程序所能识别使用的组件:
点击上方工具栏的“工具”按钮->选择“构建npm”
构建完成后,可发现在目录中多了个"miniprogram_npm"文件夹:
5、注册所需组件并使用
在.json文件中的"usingComponents"配置项中注册所需要的组件并在wxml使用即可,以vant的搜索框为例:
5-1、注册所需组件
{
"usingComponents": {
"van-search": "@vant/weapp/search/index"
}
}
5-2、使用组件
<van-search />
至此,在小程序中使用第三方组件的过程就完成啦~