微信小程序引用vant Weapp

vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/quickstart

第一步：在微信小程序安装vant组件 npm i vant-weapp -S --production

注意：安装成功后会生成node_modules文件，这个文件貌似没什么用，留在代码包里反倒会占用体积，后续构建成功后可以删掉

第二步：在小程序的根目录执行npm init一路回车yes生成package.json文件

第三步：构建npm：在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”，等待构建完成

这里注意下，构建成功就会生成一个默认名称为miniprogram_npm的文件夹。这个文件夹可以自定义命名的，为了更语义化，我通常会命名为vantComponent

第四步：在需要使用的页面json文件中引入组件

{"usingComponents": {"van-button": "../../miniprogram_npm/@vant/weapp/button/index","van-field": "../../miniprogram_npm/@vant/weapp/field/index","van-search": "../../miniprogram_npm/@vant/weapp/search/index"}
}

效果：

可能会出现的问题：

这种问题，我出现过是因为npm构建虽然成功，但是没生成 miniprogram_npm，所以一直报错，解决方法为多尝试构建几次就好了。此外，路径引用写错了，也会出现上述情况。

微信小程序引用vant Weapp相关推荐

微信小程序中Vant Weapp的引用与使用
微信小程序中Vant Weapp的引用与使用 1.安装方式 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @va ...
微信小程序引用vant toast 提示 “未找到 van-toast 节点“
微信小程序引用vant 的toast 出现如下报错都是因为没有正确引入toast 组件正确引入toast 组件需要在三个文件中设置在 .wxml 文件的 view 内写入 <van-toa ...
微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序使用vant weapp报错
微信小程序使用vant weapp报错错误一:构建错误错误二:["usingComponents"]["van-button"] 未找到我的安装流程 1. ...
微信小程序升级Vant Weapp版本
微信小程序升级Vant Weapp版本大家好,今天我们来学习一下微信小程序如何升级Vant Weapp版本,好好看,好好学,超详细的第一步首先你要有一个构建npm的项目还不知道构建npm的小伙 ...
【微信小程序】Vant Weapp
微信小程序中使用Vant Weapp 进入项目,使用 npm init 初始化项目,生成package.json. 安装vant weapp方式通过 npm 安装 npm i @vant/weapp ...
微信小程序引用vant框架
1.在微信开发者工具中打开终端(视图-终端)输入 npm init (初始化)一直回车确认 2.vant 官网: Vant Weapp - 轻量.可靠的小程序 UI 组件库安装: # 通过 npm ...
Day267/300 Mac微信小程序引入@vant/weapp样式不生效问题
(一)需求微信小程序想使用Vant Weapp ,按照官网的步骤安装成功,但是就是不生效--是在真机预览的时候生效,但是在开发工具上的时候不生效. 折腾了一天多,终于解决了,分享给大家. (二)官网 ...
微信小程序引入vant Weapp
1.微信小程序的内置终端用不了,只能使用外部终端点击微信开发者工具>视图>命令面板(或者Ctrl+Shift+Alt+P)打开外部终端或者直接Ctrl+Shift+C直接打开 2.打开 ...

微信小程序引用vant Weapp

微信小程序引用vant Weapp相关推荐

最新文章

热门文章