微信小程序集成Vant Weapp移动端开发的框架
什么是Vant Weapp
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
官网地睛：介绍 - Vant Weapp (vant-ui.github.io)
使用的步骤
下面一一展示使用的步骤：
一、第一步，打开CMD终端进入到小程序项目目录
npm init -y
此时看下图：
三、进行安装依赖
1、通过npm安装vant/weapp
npm i @vant/weapp -S --production
2、安装miniprogram
npm i miniprogram-sm-crypto --production
进行安装完毕后，回发现目录下多了一些文件
四、修改app.json
将 app.json 中的 “style”: “v2” 去除，原因是小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
五、修改project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
此处这里也可以写成 这样的形式
"miniprogramNpmDistDir": "./"
六、然后构建npm 需要点击左上角的工具栏
构建成功，会出现如下图所示：
点击确定即可。
八、使用组件
按官网的说明文档
实操一下：我这里在全局里面注册一个按钮，然后使用它。先去app.json中注册
这个是使用一个vant组件，去对应的去引用，这个路径对应的是如下图所示：
可以看到效果
结尾：样例小程序二维码，自己做的一个免费好用的排班小程序
原文地址：https://blog.csdn.net/neterrrr/article/details/145115208
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！