@vant/weapp

文章目录

一、介绍
二、安装
- 1. cd 到项目文件目录
- 2. 使用 npm 安装
- 3. 修改项目配置
- 4. 构建
- 5. 其他文件
三、使用
四、【参考】

微信小程序使用@vant/weapp组件

一、介绍

Vant 是一个开源的移动端组件库，在微信小程序开发中可以使用该UI库提提供的组件。

使用这个三方库可以更快捷的使用我们小程序的开发，直接引用里面的组件完成我的开发内容。

二、安装

按照如下步骤将 @vant/weapp 导入到微信小程序项目中：

1. cd 到项目文件目录

cd /Users/morris/WeChatProjects/miniprogram-1

打开终端，输入cd 然后将项目文件夹拖拽到终端里即可

2. 使用 npm 安装

npm i @vant/weapp -S --production

如果提示 --production 使用 --omit=dev 代替的话，将命令改为 npm i @vant/weapp -S --omit=dev 即可
使用该命令的前提是，电脑上已经安装了 npm, npm 相当于一个包的资源管理器，如果未安装的话先自行了解和安装

3. 修改项目配置

删除 app.json 中的 "style": "v2"
修改 project.config.json
将 project.config.json 里的packNpmManually改为true，在 packNpmRelationList 这个数组中添加一个元素 {
“packageJsonPath”: “./package.json”,
“miniprogramNpmDistDir”: “./miniprogram/”
}

因为我们使用的是JavaScript基础模板，没有用TypeScript等，所以不需要 typescript 支持相关的配置（官网介绍里的步骤五 typescript 支持）。
安装完之后项目里会多一个 node_modules 的文件

4. 构建

使用微信小程序开发工具，打开项目，选择【工具】-> 【构建】即可。

构建如果报错的话，将第三步里的 miniprogramNpmDistDir 改为 ./ 之后再次构建，构建完之后再改回原来值，再构建一次。
构建完项目里多一个miniprogram_npm 的文件，里面是引入的组件库

5. 其他文件

构建完成之后项目里会多出来下面一些文件

package.json

{"dependencies": {"@vant/weapp": "^1.10.18","apifm-wxapi": "^3.63.0"}
}

dependencies 依赖

这个文件是项目的依赖配置文件，是一个json文件，从里面可以查看当前项目都依赖了哪些第三方的包，以及这些包的版本号。

package-lock.json

这个文件中，有一些项目里的三方库的依赖详细信息。

三、使用

app.json 里添加组件路径

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

usingComponents 设置项目里使用的组件依赖文件路径

视图层使用组件

<!-- 小程序button组件 -->
<button>button</button>
<!-- vant van-button组件 -->
<van-button type="primary">按钮</van-button>

四、【参考】

[1] Vant github 地址: https://github.com/youzan/vant
[2] Vant Weapp 开发指南: https://vant-contrib.gitee.io/vant-weapp/#/home
[3] Vant4 中文介绍：https://vant-contrib.gitee.io/vant/#/zh-CN/home

以上所有内容，在vant/weapp的官网介绍里都有，我只是整理了一下，有什么不明白的可以直接到官网上查看。

@vant/weapp相关推荐

微信小程序开发实战（二）UI组件介绍 Vant Weapp
微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 1 第三方组件库 Vant We ...
分享一个Vant Weapp小程序UI组件库
Vant Weapp官方地址:https://youzan.github.io/vant-weapp/#/ Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提 ...
关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式
1.在根目录下创建wxcomponents 2.引入vant weapp 1.我们到https://github.com/youzan/vant-weapp下载最新的压缩包 2. 解压,将里面的dis ...
小程序 | 使用 npm 模块配置 Vant Weapp 框架
之前体验了 iView 的UI框架,感觉还可以主要是因为在开发体验上比原生敲代码好很多,不过 iView 框架可利用的组件较少,比如搜索框的组件等并未涉及,而且已有的组件也存在一些需要自行生硬的修改才 ...
mpvue使用vant Weapp运行npm run build命令打包后失效
最近在使用mpvue开发微信小程序,在开发过程中使用有赞的小程序ui框架-- vant Weapp ,至于如何使用在我个人博客中有一篇关于如何使用vant Weapp ,需要的同学请点进这里自行查看. ...
Vant Weapp小程序蹲坑之事件名称问题及解决方案
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用.值得褒奖的是,Vant Weapp 组件库更新非常迅速 ...
解决[“usingcomponents“][“van-button“]: “@vant/weapp/button/index“ 未找到：
解决步骤: 命令行cd转到miniprogram目录(注意使用下面的命令行要在工程目录下cd) cd .\miniprogram\ 在这里生成package.json npm init -y 在这个目 ...
筱筱看博客（微信小程序、Lin-ui组件、vant Weapp）
今日分享 1.微信小程序我是使用微信开发者工具做的小demo.首先呢!我写了一个简单的for.点击事件. for 循环.点击的事件小demo. for 循环的案列,如下: 点击事件的案列,如下: 2 ...
MPX + Vant Weapp 在微信小程序中实现Picker选择器
目录功能概述实现步骤在MPX项目中引入Vant Weapp Popup与Picker组件结合实现Picker选择器代码效果实现单页面中的多个Picker选择器代码 Picker选择器的多 ...
如何从Vant Weapp、MinUI、iView Weapp、Wux Weapp、ColorUI共5个小程序组件库选型转载
前言发展到今天,手机端组件库其实已经大同小异,熟练的程序员甚至都能背过80%的组件名称,比如toast.cell.checkbox--,来来回回就是这么些,那么,面对市面上最火的5个小程序组件库,我 ...