在微信小程序云开发中引入Vant Weapp组件库

介绍

Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

介绍 - Vant Weapp (youzan.github.io)

Vant Weapp需要安装 node.js,不会安装的自行百度。

通过 npm 指令安装 Vant Weapp

在微信小程序云开发中引入Vant Weapp组件库_第1张图片

云开发的右键点击miniprogram在外部终端窗口打开

1 npm init -y

在微信小程序云开发中引入Vant Weapp组件库_第2张图片

2   npm 指令安装 Vant Weapp

npm i @vant/weapp -S --production

在微信小程序云开发中引入Vant Weapp组件库_第3张图片

安装完成多了这几个文件

在微信小程序云开发中引入Vant Weapp组件库_第4张图片 

修改 app.json

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

 修改 project.config.json

在微信小程序云开发中引入Vant Weapp组件库_第5张图片

构建 npm 包 

打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,多了一个miniprogram_npm,即可引入组件了

在微信小程序云开发中引入Vant Weapp组件库_第6张图片

使用

在微信小程序云开发中引入Vant Weapp组件库_第7张图片 

 

 

 注意引入的位置,很重要

在微信小程序云开发中引入Vant Weapp组件库_第8张图片 

看到第一个按钮,说明安装成功了,具体怎么玩出花那要看自己的本事了。 

 

你可能感兴趣的:(微信小程序,小程序)