一、小程序中如何使用vantUi库

小程序自带的一些组件有时候不能满足我们的一些需求，这个时候引入vant ui的组件是一个好的选择，今天详细说说使用这个vant ui的曲折过程。。。。

1.先在小程序中打开终端，使用npm init -y命令初始化,生成package.json文件
在小程序跟目录cmd进入小黑框或者直接在微信开发工具里终端打开，输入npm init -y

2.安装vant ui 依赖

npm i @vant/weapp -S --production

3.根据vant ui官网要求 package.json 和 node_modules 必须在 miniprogram 目录下；所以我们使用工具让它自动生成
操作步骤：点击左上方的工具，选择构建npm

操作成功的效果图：

4.引用和使用vant组件：（关于如何引用和使用组件可以参考官方文档噢，很齐全）

去官网的使用方式：点击跳转到vant weapp官网

小程序中如何使用vantUi库相关推荐

微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
微信小程序中引用vant组件库
步骤 1.vant组件库里面也有说明,它说package.json 和 node_modulles 必须在miniprogram目录下,可是一般你刚新建一个小程序项目的时候,是没有package.js ...
在微信小程序中使用阿里图标库Iconfont
点击 '下载至本地',并解压文件夹把这几个文件放在小程序项目中, 在app.wxss(图片上用的是taro和taro-UI框架的格式)中引入iconfont.css,然后其他地方就可以使用了
【小程序】小程序中使用阿里图标库
文章目录 1.学会在阿里图标库中图标添加进项目 2.引用图标库资源 1.学会在阿里图标库中图标添加进项目相关文章 2.引用图标库资源 1.复制代码,浏览器搜索 2.搜素后复制代码,新建一个.wxss ...
微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理阿里图标库(不会使用的底下留言 ...
记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
五分钟学会在微信小程序中使用 vantUI 组件库
前言我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
如何把Iconfont阿里巴巴矢量图标库引入web项目和微信小程序中，拿走不谢
登录Iconfont-阿里巴巴矢量图标库官文地址:https://www.iconfont.cn/ ①必须登录才行,我这边是用新浪微博登录的 ②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标 ...
考研题库小程序中如何实现打开考研思维导图pdf
考研题库小程序中如何实现打开考研思维导图pdf 需求:遇到这么一个需求,考研题库小程序中,为解决分享学习资料的痛点,需要做一个资料库,所以就要实现打开考研资料思维导图pdf的功能. 问题:微信小程序中 ...

小程序中如何使用vantUi库

一、小程序中如何使用vantUi库

小程序中如何使用vantUi库相关推荐

最新文章

热门文章