微信小程序如何使用Vant组件
前言
今天闲着没事,兴趣来了,想写写微信小程序,用原生的敲,因为懒得原因,不想再去封装一些组件库,就想当Vant,引用Vant真的是一波三折,不用不知道,一用才知道,好了,废话说的差不多了
一、微信小程序自动查找
Vant官网说的其实也挺清楚的,
第一步:npm i @vant/weapp -S --production
第二步:将 app.json 中的 “style”: “v2” 去除,
第三步:修改 project.config.json
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
第四步:打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
但是这里有可能会报错!!!
第四步解决问题:因为这个文件没有,它引用了。这个时候你需要在根目录下创建一个同名的文件夹就可以构建了,构建之后
①:
②:
③:
出现这个界面恭喜你离成功更进一步
④:
⑤:
⑥:
⑦:
第五步:引入:
在app.json里属于全局的,会造成压力,可以按需引入,在对应的文件.json的组件注册就可以了
这里以按需引入为例
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
wxml内使用即可,上面第四步已经说明过,就不多做解释了。
<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 type="danger">危险按钮</van-button>
第二种
注意这里我把@vant文件夹放在根目录下了,用相对路径去找就可以了了 重复上面第四步的的⑥⑦即可