目前,小程序当中已经支持使用npm安装的第三方包,通过使用这些第三方包,我们可以提高对小程序开发的效率,但是在小程序当中使用所谓的npm包有如下的三个限制
在这里首先我们需要初始化一下这个项目,为了方便我们组件库的使用
在初始化之前我们要确保小程序当中是否存在包管理文件(package.json),没有的话我们需要打开命令行窗口进行创建
创建完毕
目前的最新版本是1.10.3
我这里出现了一个错误,网络上的解决教程是删除掉这个.npmrc的文件,为了防止误删我将这个文件保存在我的小程序文件夹当中(D:\VXdevelopment\防止误删npmrc)
输入我们的指令=>(npm i @vant/weapp@1.10.3 -S --production)
在app.json文件当中去除 style:v2的选项
设置 usingComponents配置项,添加我们需要使用的组件样式,其实就和自定义组件类似
"usingComponents": { "van-button": "@vant/weapp/button/index" },
我们这里设置的是全局样式,如果需要在特定页面引用组件的话在对应的页面添加相对参数即可
在我们的index页面使用这个组件
<van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button plain hairline type="primary">细边框按钮</van-button> <van-button plain hairline type="info">细边框按钮</van-button>
更多详细步骤参考官方文档即可