步骤一：微信小程序空白地方右键 → 在外部终端窗口打开

步骤二通过 npm 安装

输入npm init，然后填写初始化信息，默认值可以按回车

npm init
npm i @vant/weapp -S --production

步骤二修改 app.json

将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三修改 project.config.json

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

步骤四构建 npm 包

打开微信开发者工具，点击工具 -> 构建 npm，构建完成后，即可引入组件

步骤五引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录

// 通过 npm 安装
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

步骤六使用组件

<van-button type="primary">按钮</van-button>

小程序引入vant组件相关推荐

微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序用vant组件制作通讯录
微信小程序用vant组件制作通讯录效果图: 代码如下: .wxml: 在这里插入<van-index-bar index-list="{{ indexList }}"> ...
微信小程序引入 Vant UI
微信小程序引入 Vant UI 一. 安装 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp ...
微信小程序引入Vant UI
微信小程序引入Vant UI 第一次导入Vant UI时,照着vant weapp 官网给的"快速上手"文章做的,结果出了几大错误,改了半小时才解决.下面将完整演示引入流程. 1. ...
微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...
微信小程序引入日历组件
GitHub - treadpit/wx_calendar: 微信小程序-日历组件
小程序引入第三方组件库Vant Weapp
最近在看小程序中引入第三方组件相关知识,在引入过程中一直出现各种问题和报错最终终于成功暗中使用:以下为 npm安装的步骤及安装过程中可能的报错和小编认为的原因. vant-weapp中文文档:http ...
微信小程序——引入vant有赞组件 2022年3月3日
引入vant有赞组件 1.使用管理员权限打开cmd 运行命令 npm init -y 2.下载资源包 npm i @vant/weapp -S --production 3.在开发工具内选择工具-&g ...
微信小程序使用vant组件报错
背景介绍:在一个月之前新建了一个微信小程序项目,新建一个项目参照了微信小程序npm支持的步骤,构建了npm,官网地址如下: npm 支持 | 微信开放文档之后分别在两台电脑上跑过,之前预览开发版代 ...

小程序引入vant组件

步骤一：微信小程序空白地方右键 → 在外部终端窗口打开

步骤二通过 npm 安装

步骤二修改 app.json

步骤三修改 project.config.json

步骤四构建 npm 包

步骤五引入组件

步骤六使用组件

小程序引入vant组件相关推荐

最新文章

热门文章

小程序引入vant组件

步骤一：微信小程序空白地方右键 → 在外部终端窗口打开

步骤二 通过 npm 安装

步骤二 修改 app.json

步骤三 修改 project.config.json

步骤四 构建 npm 包

步骤五 引入组件

步骤六 使用组件

小程序引入vant组件相关推荐

最新文章

热门文章

步骤二通过 npm 安装

步骤二修改 app.json

步骤三修改 project.config.json

步骤四构建 npm 包

步骤五引入组件

步骤六使用组件