微信小程序安装Vant组件库

在小程序项目中，安装Vant组件库主要分为如下几步：

一、通过npm安装

①在微信开发者工具项目目录中，右击在外部终端窗口中打开

②输入npm init -y初始化包
③输入npm i @vant/weapp@1.3.3 -S --production。其中@1.3.3用来指定安装的版本

二、修改app.json
删除app.json中的"style":"v2".这是为了防止微信中的样式与vant中的样式发生冲突。

三、修改 project.config.json
在project.config.json中的setting节点中修改以下两项：

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

四、构建 npm 包
点击微信开发者工具菜单栏中的工具--构建npm包

出现以下两个文件就说明安装成功了。

五、引入组件
在app.json或index.json中引入组件。

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

六、使用组件
引入组件后，可以在 wxml 中直接使用组件

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

微信小程序安装Vant组件库相关推荐

微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
微信小程序引用Vant组件库message：没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内...
问题描述 message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,或配置 project.config.json 的 pack ...
微信小程序用vant组件制作通讯录
微信小程序用vant组件制作通讯录效果图: 代码如下: .wxml: 在这里插入<van-index-bar index-list="{{ indexList }}"> ...
微信小程序使用vant组件报错
背景介绍:在一个月之前新建了一个微信小程序项目,新建一个项目参照了微信小程序npm支持的步骤,构建了npm,官网地址如下: npm 支持 | 微信开放文档之后分别在两台电脑上跑过,之前预览开发版代 ...
微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”
注意:本篇文章不含技术方面的内容,只是感慨一下,如果你有类似的情况,或者想感受一下搞笑的bug,可以继续看一看,如果你想学习技术,本篇文章大概不会为你提供什么教学帮助. 我在做微信小程序的时候遇到过一 ...
微信小程序引入WeUI组件库（笔记）
1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...
微信小程序集成WeUI组件库
1.引入nmp依赖(前提是已经安装了nmp) 在小程序根目录(app.js所在目录),打开cmd, 输入:npm init -y,回车初始nmp 然后再输入:npm i miniprogram-sm- ...
微信小程序入门ColorUI组件库使用方法
自学入门小程序不久,在对比现在主流的组件库后,笔者我选择了ColorUI,因为ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制. 下面是Col ...
【微信小程序】vant组件tab标签页标签栏大小自适应改变
文章目录前言一.更改前二.更改内容 1.js 2.wxss 三.更改后前言 vant组件v1.9.2,tab组件样式都写为px,更改几处为rpx即可.其他子组件也可这样进行修改.但最好不要直接 ...

微信小程序安装Vant组件库

微信小程序安装Vant组件库相关推荐

最新文章

热门文章