Vant组件之构建npm过程记录(微信小程序)

F:\COMPUTER\miniprogram>npm install

A complete log of this run can be fund in: C\Users\用户\AppData\Roaming\npm-cache_logs

——解决办法:重新创建新的文件夹miniprogram

F:\COMPUTER\miniprogram>npm init

This utility will walk you through creating a package.json file. It
only covers the most common items, and tries to guess sensible
defaults.

See npm help init for definitive documentation on these fields and
exactly what they do.

Use npm install <pkg> afterwards to install a package and save it as
a dependency in the package.json file.

Press ^C at any time to quit.

——解决办法:改用指令npm init -y

F:\COMPUTER\miniprogram>npm init -y

F:\COMPUTER\miniprogram>npm install

npm WARN miniprogram@1.0.0 No description
npm WARN miniprogram@1.0.0 No repository field.

——解决办法:package.json文件添加字段:“private”: “true”,

F:\COMPUTER\miniprogram>npm install

up to date in 0.33s ——成功解决npm install问题

工具-构建npm

Error: F:\COMPUTER\miniprogram\package.json 对应的 node_modules 不存在,请在
F:\COMPUTER\miniprogram 执行 npm install

——解决办法:F:\COMPUTER\miniprogram>npm i @vant/weapp -S --production

此时项目生成node_modules文件,这时再进行工具-构建npm,成功!


附整个成功构建的流程:

创建新的文件夹miniprogram

F:\COMPUTER\miniprogram>npm init -y

package.json文件添加字段:"private": "true",

F:\COMPUTER\miniprogram>npm install

F:\COMPUTER\miniprogram>npm i @vant/weapp -S --production

此时项目生成node_modules文件,这时再进行工具-构建npm,系统提示构建完成,
并生成新的文件夹miniprogram_npm,代表构建成功。
### 微信小程序 Vant 组件构建 NPM 失败解决方案 在微信小程序开发过程中,当尝试使用 Vant 组件库时遇到无法构建 NPM 包的情况,通常是因为项目配置文件未正确设置或缺少必要的依赖项。以下是针对该问题的具体分析与解决方法。 #### 1. 确认 `miniprogramRoot` 目录内的 NPM 包 确保所有的 npm 包都位于项目的 `miniprogramRoot` 目录下。如果某些包不在指定目录内,则可能导致构建失败。可以通过调整 `project.config.json` 文件中的 `packNpmManually` 和 `packNpmRelationList` 参数来手动管理需要打包的 NPM 资源[^1]。 ```json { "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "node_modules/@vant/weapp/package.json", "alias": {} } ] } ``` 上述代码片段展示了如何通过 `packNpmRelationList` 显式声明需要参与构建NPM 包路径及其别名映射关系。 #### 2. 检查并更新 `usingComponents` 对于每个页面或组件,在其对应的 JSON 配置文件中需正确定义所使用的 Vant 组件路径。例如: ```json { "usingComponents": { "van-button": "@vant/weapp/button/index" } } ``` 此步骤确保了各页面能够正确加载所需的 Vant 组件资源[^3]。 #### 3. 移除不必要的样式版本控制字段 如果发现部分组件样式未能正常显示,可能由于小程序基础库强制应用了一些默认样式而导致冲突。此时应移除 `app.json` 中关于 `"style"` 字段的相关定义(即删除 `"style": "v2"`),从而避免新版基础组件带来的额外影响[^2]。 #### 示例代码:完整的按钮组件引入方式 以下是一个完整示例,展示如何在一个页面中成功集成 Vant 的 Button 组件: ```javascript // index.js Page({ data: {}, }); ``` ```html <!-- index.wxml --> <view> <van-button type="primary">主要按钮</van-button> </view> ``` ```json /* index.json */ { "usingComponents": { "van-button": "@vant/weapp/button/index" } } ``` 以上内容涵盖了从基本配置到实际操作层面解决问题的方法论。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值