微信小程序整合Vant Weapp 步骤

步骤总结：
1、小程序项目创建
2、安装Vant Weapp（打开cmd命令窗口，进入项目文件夹，按顺序执行下面命令）1）npm init2）npm i @vant/weapp -S --production
3、安装完成后，修改app.json1) 去掉"style": "v2"
4、修改packpage.config.json"setting": {....."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "/"}]......}5、开启使用npm模块在软件右上角“详情”--->“本地设置”--->勾选上使用npm模块6、构建npm在软件左上角“工具”--->“构建npm”7、最后在app.json引入组件即可,如："usingComponents": {"van-button": "@vant/weapp/button/index"}

图文如下：

1、小程序项目创建
创建项目后的目录

2、安装Vant Weapp
说个微信开发者工具的坑：正常情况下，在微信开发者工具里的终端就可以进行安装 Vant Weapp。但是我的开发工具硬是输入不了文字。无奈只能用电脑cmd命令行（工具终端和cmd命令行都没啥区别），微信团队也不填下坑。。。。。
回归正题---------------------------------------------
打开项目文件夹，在地址栏输入cmd 回车

在弹出的cmd窗口输入 npm init 回车

init 后，会要你输入和确认一些信息

信息可填可不填，直接回车，会有默认值的（我就是回车到底，嘻嘻）

init操作完成后，发现项目根目录会多出package.json文件

紧接着执行 npm i @vant/weapp -S --production 安装命令

看到下图界面多出node_modules文件夹，说明vant/weapp已成功拉取到项目目录里

cmd命令行到此结束--------------------------------
回到开发工具===》
3、配置@vant/weapp环境
（1）将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

（2）修改 project.config.json

"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "/"}]

把上面配置替换掉下图红框内容

（3）使用npm模块

构建npm

构建npm完成后，会多出miniprogram_npm

最后一步，在app.json引入想要使用的vant组件

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

引入结束后，就可以到wxml页面使用啦

微信小程序整合Vant Weapp 步骤相关推荐

微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序使用vant weapp报错
微信小程序使用vant weapp报错错误一:构建错误错误二:["usingComponents"]["van-button"] 未找到我的安装流程 1. ...
微信小程序中Vant Weapp的引用与使用
微信小程序中Vant Weapp的引用与使用 1.安装方式 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @va ...
微信小程序升级Vant Weapp版本
微信小程序升级Vant Weapp版本大家好,今天我们来学习一下微信小程序如何升级Vant Weapp版本,好好看,好好学,超详细的第一步首先你要有一个构建npm的项目还不知道构建npm的小伙 ...
微信小程序引用vant Weapp
vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/qu ...
Day267/300 Mac微信小程序引入@vant/weapp样式不生效问题
(一)需求微信小程序想使用Vant Weapp ,按照官网的步骤安装成功,但是就是不生效--是在真机预览的时候生效,但是在开发工具上的时候不生效. 折腾了一天多,终于解决了,分享给大家. (二)官网 ...
【微信小程序】Vant Weapp
微信小程序中使用Vant Weapp 进入项目,使用 npm init 初始化项目,生成package.json. 安装vant weapp方式通过 npm 安装 npm i @vant/weapp ...
微信小程序引入vant Weapp
1.微信小程序的内置终端用不了,只能使用外部终端点击微信开发者工具>视图>命令面板(或者Ctrl+Shift+Alt+P)打开外部终端或者直接Ctrl+Shift+C直接打开 2.打开 ...
vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家效果图创建一个图片上传的p ...
微信小程序使用@vant/weapp组件
打开微信小程序项目终端,如果根目录没有package.json文件,就先执行命令npm init -y 之后安装@vant/weapp组件,执行命令npm i @vant/weapp -S --pro ...

微信小程序整合Vant Weapp 步骤

微信小程序整合Vant Weapp 步骤相关推荐

最新文章

热门文章