微信小程序引入Vant UI

简介: 微信小程序引入Vant UI

微信小程序引入Vant UI

第一次导入Vant UI时,照着vant weapp 官网给的“快速上手”文章做的,结果出了几大错误,改了半小时才解决。下面将完整演示引入流程。


1.构建一个新的项目

首先在开发者工具中,新建一个项目。

项目的路径应为英文,同时在选择语言时,有两种:

JavaScript:没有miniprogram文件

TypeScript:有miniprogram文件

(这个后面会提到的)

这里我们选择JavaScript语言

2.引入npm模块

在“快速上手”中,需要先初始化package.json,再进行导入操作,否则后面构建npm时,会提示你没有package.json文件。

一路回车即可。

接着,通过npm安装vant

此时,可以看到已经有了 node_modules和package.json两个文件了。

3.修改信息

接着需要修改一些信息。

这里附上“快速上手”地址:

https://youzan.github.io/vant-weapp/#/quickstart#bu-zou-san-xiu-gai-project.config.json

修改完后,选择“构建npm”,突然发现报错

当时我也被这个卡住了,百度后才解决:

将packNpmManually保留false即可!

再次构建,显示成功!

可以看到miniprogram_npm文件夹也有了

4.使用vant UI库组件


为了验证我们是否成功导入了vant,我们决定使用其ui库组件。

在相对的.json文件中添加配置:

这里我在app.json中加入了button组件

引入组件后,就可以在.wxml中直接使用组件了:

可以看到模拟器上成功显示了按钮组件,可见此时已经导入成功了!

相关文章
|
3月前
|
小程序 搜索推荐 JavaScript
微信小程序使用Vant
微信小程序使用Vant
147 2
|
3月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
51 1
|
3月前
|
SQL 监控 小程序
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
171 58
|
2月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
90 2
|
2月前
|
小程序 开发者 UED
支付宝小程序UI/UX设计原则与最佳实践
支付宝小程序UI/UX设计原则与最佳实践
92 6
|
3月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
2月前
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
120 4
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
256 1
|
2月前
|
JSON 小程序 前端开发
vant weapp 在小程序中的使用
vant weapp 在小程序中的使用
112 1
|
3月前
|
小程序 JavaScript 前端开发
微信小程序安装和使用 Vant Weapp 组件库
本文介绍了如何在微信小程序中安装和使用Vant Weapp组件库,包括通过npm安装、构建npm、修改配置文件以及在小程序中使用Vant Weapp提供的组件。
微信小程序安装和使用 Vant Weapp 组件库