小程序 + Vant
在微信开发者工具下图输入指令：
第一步
npm init -y
- 这个时候会生成package.json和lock文件
第二步
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。在setting节点里修改设置：
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": ""
}
]
第三步
//直接下载你所需要的安装包 （这步可能不要）
npm install --save weui-miniprogram
# 通过 npm 安装 vant
npm i @vant/weapp -S --production
第四步 修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱
第五步
- 工具——>构建npm
第六步
- 这个时候根目录下面就有了miniprogram_npm文件
其他参考：Vant Weapp - 轻量、可靠的小程序 UI 组件库
如何解决“....... 已被代码依赖分析忽略，无法被其他模块引用”报错？
解决方式：
- 修改依赖引用的代码：可根据控制台中的【代码依赖分析异常】提示进行修改。（推荐）
- 关闭过滤无依赖文件：project.config.json 中 settings 选项添加 ignoreDevUnusedFiles: false , ignoreUploadUnusedFiles: false
- 本地设置-上传是过滤无依赖文件（可能不要这步，或者这步效果与上面的一样）
错误截屏
解决办法
进入到vant-weapp目录下，将里面的组件全部删除
然后打开 vant的官方git仓库 ：GitHub - youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库
将其全部下载下来，再将里面的dis目录代码放入vant-weapp中即可将问题解决！
成功解决
toast，官网引用的路径错了
import Toast from '@vant/weapp/toast/toast';
小程序 + Vant相关推荐
- 小程序/Vant UI 实现文件的上传
小程序/Vant UI 实现文件的上传 第一次接触小程序上传的时候,自己经过一些实验测试并记录下来以供大家学习. 使用vant UI的官网地址:Vant Weapp - 轻量.可靠的小程序 UI 组件 ...
- 微信小程序 - vant popup弹出层阻止底层页面滑动
前言 在小程序编写过程当中使用使用vant weapp的popup组件作小程序的弹出层,触屏致使底层页面跟着滑动.web 解决方法 使用touch事件阻止属性,@touchmove.stop.prev ...
- 微信小程序Vant Weapp里面Calendar 日历组件不显示的问题
想用Vant Weapp弄个弹出日历选择日期的组件,但是发现按照Vant Weapp里面的文档复制粘贴就翻车了. 复制粘贴后小程序界面空空如也,啥都没有. 百度了一番也没有帖子写这个问题,然后我就只能 ...
- 微信小程序 vant webapp开发
一.简介 vant 官网 https://youzan.github.io/vant-weapp/#/home 最近开发微信小程序使用 vant 过程中按照官网步骤没有成功,特此记录 二.环境说明 开 ...
- 微信小程序 + vant组件van-card 图片解析不到
在使用vant组件制作微信小程序项目时,遇到了图片解析不到的问题. 场景如下: 在页面中,应用了vant组件库中的van-card,组件中将图片路径传给van-card中的thumb属性,即可在左侧位 ...
- 小程序Vant Weapp的Dialog使用before-close
结合使用了组件调用和异步关闭,vant官方文档好像没有考虑过这个问题,参考了大佬的写法 小程序 van-dialog确认时阻止弹窗关闭 Vant/Weapp/Dialog/before-close的用 ...
- 微信小程序——Vant Weapp的初步使用说明
在微信工程目录下 在终端中输入npm init(初始化设置) 不用输入继续回车(全部默认即可) 整个步骤结束以后它会在\miniprogram目录下生成两个json文件 不用去修改它自动生成的文件,接 ...
- 微信小程序 - Vant weapp UI 框架环境搭建详细教程（Window）
前言 强烈推荐您打开 官方文档,对照着本教程一起对比搭建坏境. 自从 2022 年开始,小程序做了很多改变和升级, 导致网上很多搭建教程文章的教程失效了,本文来做最新的教程. 第一步 为了更贴合新手, ...
- 小程序vant tab组件解决文字过多显示不全的问题
使用小程序时,某些分类名称可能会过长,导致tab组件显示就会出现下图显示不全的问题. 方法步骤 1. 增加tab-class标签样式类 <!--增加tab-class定义--> <v ...
最新文章
- 忘记Windows 7 登录密码，3分钟我来搞定
- LunarPages空间500错误原因及解决办法
- 006_JavaScript注释
- 格式字符串语法，摘取自JDK6
- JavaFX官方教程（三）之JavaFX示例应用程序入门
- Angular6_PWA
- mysql的ps.setmaxrows_mysql自定义函数实现表的指定列进行数据脱敏（PS：来自mysql小白的提问）...
- Too many open files 问题的解决
- python预测实例教程_手把手教你用Python库Keras做预测（附代码）-阿里云开发者社区...
- 数值分析(第五版) 第一章知识点总结
- VUE+axios+php实现图片上传
- union matlab,[转载]intersect,unique,union在matlab中的用法（I lo
- 要看方兴东的博客 只能上Google去找他
- 大学生游戏静态HTML网页作业--美丽中国
- vivado 如何添加时序约束
- layui表格宽度自适应
- 鼎信诺虚拟服务器导数,鼎信诺审计前端取数讲解.ppt
- ps2022自学教程：使用Photoshop Mac软件创建动画和音频
- mysql死锁分析工具show engine innodb status
- 效果超好的自制美白面膜大汇总 - 生活至上，美容至尚！