微信小程序引入Vant UI
第一次导入Vant UI时,照着vant weapp 官网给的“快速上手”文章做的,结果出了几大错误,改了半小时才解决。下面将完整演示引入流程。
1.构建一个新的项目
首先在开发者工具中,新建一个项目。
项目的路径应为英文,同时在选择语言时,有两种:
JavaScript:没有miniprogram文件
TypeScript:有miniprogram文件
(这个后面会提到的)
这里我们选择JavaScript语言
2.引入npm模块
在“快速上手”中,需要先初始化package.json,再进行导入操作,否则后面构建npm时,会提示你没有package.json文件。
一路回车即可。
接着,通过npm安装vant
此时,可以看到已经有了 node_modules和package.json两个文件了。
3.修改信息
接着需要修改一些信息。
这里附上“快速上手”地址:
https://youzan.github.io/vant-weapp/#/quickstart#bu-zou-san-xiu-gai-project.config.json
修改完后,选择“构建npm”,突然发现报错
当时我也被这个卡住了,百度后才解决:
将packNpmManually保留false即可!
再次构建,显示成功!
可以看到miniprogram_npm文件夹也有了
4.使用vant UI库组件
为了验证我们是否成功导入了vant,我们决定使用其ui库组件。
在相对的.json文件中添加配置:
这里我在app.json中加入了button组件
引入组件后,就可以在.wxml中直接使用组件了:
可以看到模拟器上成功显示了按钮组件,可见此时已经导入成功了!