您的位置:首页 > 游戏 > 游戏 > 微信小程序 npm构建+vant-weaap安装

微信小程序 npm构建+vant-weaap安装

2024/12/23 0:44:14 来源:https://blog.csdn.net/Z_Wonderful/article/details/139345679  浏览:    关键词:微信小程序 npm构建+vant-weaap安装

微信小程序:工具-npm构建

报错

在这里插入图片描述
在这里插入图片描述

解决

1、新建miniprogram文件后,直接进入到miniprogram目录,再次执行下面两个命令,然后再构建npm成功

npm init -y
npm install express(Node js后端Express开发,不使用可以不安装)
npm install

Express框架是Node.js基金会的一个项目,官方网址为http://expressjs.com。(中文网站为
http://expressjs.com/zh-cn)。它提供了对Node.js原生API比较好的封装,从而使开发者更容易的使用Node.js,并用来开发强壮的Web、移动应用,以及API的一些其他功能。开发人员还能够方便的为它开发插件和扩展,从而增加Express的能力。
(Node js后端Express开发,不使用可以不安装)

2、在project.config.json文件找到‘setting’并添加如下配置
在根目录创建一个miniprogram文件夹
将pages、utils、app、sitemap.json等和源代码相关的文件移到miniprogram文件夹下。
在这里插入图片描述

 "packNpmManually": true,//默认是false,要改成true"packNpmRelationList": [{"packageJsonPath": "./package.json", //不一定这个位置,看package.json对应位置//例如    "packageJsonPath": "./miniprogram/package.json","miniprogramNpmDistDir": "./miniprogram/"}],

在这里插入图片描述
再安装:

  • 通过 npm 安装
  • npm i @vant/weapp -S --production

进行工具–npm 构建
构建成功,给页面引入组件就可以使用
微信小程序官网-自定义组件
index.josn

{"usingComponents": {"van-button": "@vant/weapp/button/index"}
}

每个人状况不一样:如下

如果报错:构建失败
vant-weapp官网
新版本没有
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
3、配置完先不要急于去点【构建npm】,而是先点击【重新打开此项目】(防止出现一些奇怪的问题)
在这里插入图片描述
4、等待项目重新打开加载完成后,再点击【构建npm】
在这里插入图片描述
微信开发工具构建

安装vant-weaap

在这里插入图片描述
在这里插入图片描述

注意:

配置好项目的路径之后记得重新打开项目再构建,

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com