[微信小程序] 项目引入vant组件库 npm构建问题 避坑

这篇具有很好参考价值的文章主要介绍了[微信小程序] 项目引入vant组件库 npm构建问题 避坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 按照Vant Weapp官网的快速上手,构建npm时发现报错

问题:package.json 未找到

原因:没有初始化npm,所以没生成package.json,npm构建时需要此文件,所以报此错误

解决:在项目根目录里执行 “ npm init ”

再次构建npm,还会报错,此时按照vant官方文档 再次执行即可:

npm i @vant/weapp -S --production

如果还是没有成功,检查两个地方

# 项目根目录下的 app.json 是否删除了这行代码

"style": "v2" // 这行代码要删掉,vant官方文档中解释了具体原因
# 项目根目录下的 project.config.json
"packNpmRelationList": [
  {
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./"  // 将这里改成./就行了,程序会自动生成miniprogram
  }
]

至此,问题解决

再次点击  工具构建npm  即可 文章来源地址https://www.toymoban.com/news/detail-585531.html

到了这里,关于[微信小程序] 项目引入vant组件库 npm构建问题 避坑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序通过npm引入tdesign包进行构建的时候报错

    问题 在通过npm 引入 tdesign时:https://tdesign.tencent.com/miniprogram/getting-started 通过微信小程序IDE进行npm构建的时候出现:无法构建,应该怎么办? 解决方法: 1 输入: 命令 2 重新点击工具-npm构建 这个时候,黑框出现一段Json,同时提示构建成功,即可开始使用tdesign了!

    2024年02月10日
    浏览(45)
  • 微信小程序引入Vant报Component is not found问题

    好多年没写过代码了,最近想做个工具用于日常工作,发现全忘了,还是记下来问题解决办法吧。 1、按照网上流程,安装node.js,设置环境变量和路径,最后通过cmd验证安装是否成果 2、在小程序根目录运行npm init,一路enter即可 3、运行npm install @vantweapp --s --production 4、通过

    2024年02月16日
    浏览(46)
  • Vite + Vue3 +Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案

    一.问题定位 在Vite + Vue3 +Vant4构建项目时,需要使用Toast组件显示提示信息,按照官方文档使用函数调用 使用后直接报错,说是找不到对应的样式文件(如下图): 在项目中查找node-moudles文件,确实没有找到,只有一个toast文件(如下图): 在百度搜索解决方法,说是需要单

    2024年01月17日
    浏览(71)
  • 微信小程序修改vant组件样式

    1 背景 在使用vant组件开发微信小程序的时候,想更改vant组件内部样式,达到自己想要的目的(van-grid组件改成宫格背景色为透明,默认为白色),官网没有示例,通过以下几步修改成功。 2 步骤 2.1 查看官方文档 Grid 外部样式类 支持修改Grid组件样式,我们在组件上添加该属

    2024年02月09日
    浏览(75)
  • 微信小程序引入vant-weapp后出现[‘vant-XXX‘]:‘@vant/weapp/xxx‘未找到,错误解决

    出现“[‘vant-XXX’]:\\\'@vant/weapp/xxx’未找到”的错误提示 1、找到小程序所在的目录,用管理员模式下打开cmd 2、运行npm init,一路回车,用默认的即可 3、运行npm i @vant/weapp -S --production 如果用的是淘宝镜像的,使用cnpm i @vant/weapp -S --production 4、将 app.json 中的 “style”: “v2” 去

    2024年02月13日
    浏览(63)
  • 微信小程序Vant组件配置及使用

    Vant Weapp 官网文档:介绍 - Vant Weapp (gitee.io) Vant Weapp GitHub地址:youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 (github.com) 本教程使用下载代码方式引入vant组件 通过git下载vant源码 将vant源码路径下的 dist 文件夹复制到微信小程序项目中 将 app.json 下的 \\\"style\\\": \\\"v2\\\" 去除,微信小程序

    2024年02月13日
    浏览(78)
  • 微信小程序使用npm引入三方包详解

    1 前言 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。 此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm,请翻阅 官方 npm 文档 进行学习。 2 微信小程序npm环境搭建

    2024年02月11日
    浏览(59)
  • 微信小程序引入Vant Weapp修改样式不起作用,使用外部样式类进行覆盖

            在项目中使用第三方组件修改css样式时,总是出现各种各样问题,修改的css样式不起作用,没有效果,效果不符合预期等。 栗子(引入一个搜索框组件) 实现效果:  左侧有一个搜索文字背景为蓝色,接着跟一个搜索框 wxml wxss emmm...明明我们css都写了,这出现的是什么鬼   审查

    2024年02月02日
    浏览(56)
  • 解决在HBuilderX里用uniapp引入vant后在微信小程序里没反应的问题

    在HbuilderX里创建了个uniapp的项目,但是引入vant后,在微信小程序里运行没反应 这是App.vue文件 加了@import 巴拉巴拉那些 问题就出在pages.json文件里, 当我们用快捷输入的 usingComponenets 这个,就有问题了 如果你不是这个原因,那就关了这篇文章吧 如果对你有用,点个赞呗

    2024年02月12日
    浏览(60)
  • 微信小程序+vant组件 侧边导航栏切换显示

    设计页面时希望效果:左侧侧边导航栏,右侧内容。点击左侧导航栏的不同块,右侧显示不同内容。 采用了vant组件中侧边导航栏van-sidebar,van-sidebar子标签包括多个van-sidebar-item 实现方法: van-sidebar中设置 bind:change=\\\"onChange\\\": 随后在js文件中编写onChange(event),其中event.deta

    2024年02月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包