关于Vant Weapp中组件引入未找到的解决方案

在开发微信小程序时，需要引入一些第三方UI库，这时就需要用到微信小程序的 UI，分享一些遇到的问题

Vant Weapp框架引入组件失败问题:

使用Vant 组件 [“usingcomponents”][“van-button”]: “@vant/weapp/button/index” 未找到：

当出现:

vm192:2 miniproject/app.json: ["usingcomponents"]["van-button"]: "@vant/weapp/button/index" 未找到

解决方案:

确保已经在miniproject文件里初始化package.json,这样才可以进行后面的操作

npm init -y

2.在miniproject文件里下载npm资源包

npm i @vant/weapp -S --production

然后在微信开发者工具里面进行相关配置

进入 => 详情 => 本地设置 => 详情 => (勾选)使用npm模块

在顶部的菜单栏中
点击 => 工具 => 构建 npm
构建完成提示

需要配置

完成后就可以开始调入第三方UI库，接下来有一些使用过程中的细节需要配置(重要)

步骤一: 在 app.json 中
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
步骤二: 在 project.config.json 中
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]}
}注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

效果展示

接下来加入组件,试试看效果吧

首先在 app.json 或 index.json 中引入组件

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

在index.wxml中调用组件

<van-button type="default">默认按钮</van-button>

大功告成啦

关于Vant Weapp中组件引入未找到的解决方案相关推荐
1. 关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式
  1.在根目录下创建wxcomponents 2.引入vant weapp 1.我们到https://github.com/youzan/vant-weapp下载最新的压缩包 2. 解压,将里面的dis ...
2. Linux中bash: ls: 未找到命令… 相似命令是： ‘lz‘
  背景: 发现ls不能用了.ll.vi.vim都不能用了. 输入 ll命令提示: bash: ls: 未找到命令- 相似命令是: 'lz' 原因: 环境变量PATH被修改了,是刚刚操作的修改影响了P ...
3. 关于微信小程序自定义组件引入未生效问题
  文章目录原因可能原因一可能原因二成功后截图自定义组件完整使用步骤 1.在`components`文件夹下建立组件 2.编写自定义组件样式 3.引入自定义组件原因可能原因一组件的外部样式 ...
4. wordpress中解决页面未找到的问题
  1 在根目录下新建.htaccess 2 写入如下配置 # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On Rewrit ...
5. linux中提示jar未找到,Linux安装tomcat找不到bootstarp.jar问题
  在网站http://tomcat.apache.org/download-70.cgi下载apache-tomcat-7.0.22.tar.gz包:(1)当从"Source Code Dis ...
6. 'catkin：未找到命令' 解决方案
  系统版本 Ubuntu 18.04.1 ROS Melodic Morenia 编译时提示"catkin: command not found". 解决方案: 安装 catkin ...
7. 微信小程序中vant/weapp安装，初始化，及使用
  Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用. Vant Weapp官网:https://yo ...
8. UI组件库Vant Weapp的下载和使用
  Vant Weapp - 轻量.可靠的小程序 UI 组件库为了提高小程序的开发效率,通常考虑使用第三方UI组件来实现界面的视觉统一.开发者可以方便的引用已经事先设计好的自定义组件来快速搭建小程序界面 ...
9. 原生微信小程序引入npm和安装Vant Weapp
  目录一.引入npm+安装Vant Weapp 1.引入npm 2.安装Vant Weapp 3.修改 app.json 4.修改 project.config.json 二.构建npm 一.引入np ...
最新文章
热门文章

关于Vant Weapp中组件引入未找到的解决方案

在开发微信小程序时，需要引入一些第三方UI库，这时就需要用到微信小程序的 UI，分享一些遇到的问题

Vant Weapp框架引入组件失败问题:

解决方案:

需要配置

效果展示

关于Vant Weapp中组件引入未找到的解决方案相关推荐

最新文章

热门文章