vant ui 官网网址(微信小程序使用iconfont及引入vant-icon使用iconfont)

本文目录
- 微信小程序使用iconfont及引入vant-icon使用iconfont
- 微信小程序-vant-weapp日历组件的使用(年月日)
- 2020-10-04:Vant tab栏实现自定义高度
- vant的安装和使用步骤
微信小程序使用iconfont及引入vant-icon使用iconfont
(此步骤时可以精简文件,只复制保留iconfont.wxss文件到assets/iconfont文件下,其余文件删除,依然会正常显示图标)
准备工作到此已经完成,接下来进入项目配置使用;
可以使用view text等标签引入iconfont;
页面效果:
其中:
引入VantUI组件内容可参考 VantUI官网快速上手 进行配置;
页面效果:
微信小程序-vant-weapp日历组件的使用(年月日)
话不多说,记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp
***隐藏网址***
***隐藏网址***
1:打开微信开发者工具,填写自己的appid和项大敏目名称,选择不使用云服务,新建一个项目。
2:右击在选择在终端打开
进入项目的根伍仿茄目录底下,注意,一定要进入根目录哦,使用cd ../返回上一级目录~
3:小程序已经支持使用 npm 安装第三方包,
这里通过 npm 安装
这里需要注意一下
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
引入的区别
使用npm i vant-weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径
使用npm i @vant/weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径(推荐,因为这个可以直接抄文档,不需要改变引入路径的~)
4:在微信开发工具执行npm 构建,点击工具里面,构建npm
构建过程需要等待一会儿,不要捉急
构建完会生成一个miniprogram_npm文件夹
如果构建完如果编译报错,再构建一次就好了
日历文档参照一下
5:使用vant-weapp日历组件
我这里对日期的处理,是需要这样的格式YYYY-MM-dd
所以在对选中的日期做了腔察一些处理和判断~
wxml
js
json
2020-10-04:Vant tab栏实现自定义高度
上面的图就是重点。只要引用了Vant-UI 里面的tab栏组件手此,照图上写就能实现————你想要衡隐的结果
css部分
效果图如下:
详情请看:毕拦迅
***隐藏网址***
vant的安装和使用步骤
Vant 是轻量、可靠的移动端 Vue 组件库,是 有赞前端团队开发的产品。
通过vue-cli3创建项目,用vue ui 命令打开图形化界面,点击安装依赖按钮,然后搜索vant,安装。
安装完vant后,引入组件,才能使用。这里我选择自动按需引入组件,这也是官方推荐的一种引入方式。
babel-plugin-import 是一款 babel 插件,巧桥它会在编译过程中将 import 的写法自动转换为按需引入的方式。
# 安装插件
npm: npm i babel-plugin-import -D
yarn: yarn add babel-plugin-import --dev
然后,在孝歼猛 babel.config.js 中配置
plugins: [
[’import’, {
libraryName: ’vant’,
libraryDirectory: ’es’,
style: true }, ’vant’]
]
最后改誉,就可以再组件中直接引入,使用vant组件了:
OK,完成!

更多文章:
mathtype公式编号换成(怎样修改MathType公式编号的格式)
2026年1月1日 05:15
access如何用查询值给一维数组赋值(如何用vb读取access表中数据,并赋值给另一变量然后进行计算判断 急!)
2025年9月7日 11:00
surrendered是什么意思(提单问题surrendered 什么意思)
2026年5月21日 22:00
mysql和sqlyog区别(SQLyog和MySQL自带工具哪个好用)
2025年10月7日 07:30
school report(申请美国本科School report和official transcript 的问题)
2026年3月11日 00:15
ubuntu进入root用户(ubuntu切换到root用户)
2026年5月11日 23:15
sftpget到指定目录(centos7 中使用sftp窗口的get命令下载文件到Windows,请问下载到了Windows的哪个目录)
2026年1月30日 22:00
wps activex控件怎么启用(为什么我的安全设置不允许ActiveX控件!急!)
2025年6月30日 02:15
电脑access数据库下载(access数据库在电脑上怎么下载安装)
2025年9月22日 10:00
sql语句高到低排序(如何用数据库sql把一列数据从大到小排列)
2026年9月12日 18:30
双向可控硅的触发原理图及原理是什么?数据结构——图graph(基础概念)
2026年8月28日 11:15
fclose(stdout)什么意思(freopen在竞赛怎么用)
2026年8月1日 06:30












