vant开发微信小程序安装以及简单使用教程

简介: vant开发微信小程序安装以及简单使用教程

416434ba4073464697e14d323d78e0e2.png

官网地址

准备工作

首先准备一个空文件夹,新建微信小程序,把文件夹路径引入,删除index.wxml,index.wxss以及index.js中的文件内容

删除完毕后重新初始化index.js,在页面中输入page

8a8b665fd5a84346856dd6ab04651bf2.png

对外围的文件夹进行初始化

99b1f19f818144569de40734f2601358.png

接下来就是在文件夹下的目录中调出控制台输入以下命令

npm init -y

dd5fc88e6c0e49289b82bbef0eb4cac8.png

第一步:使用以下命令进行配置

npm i @vant/weapp -S --production

dbd68c59e3364f3688417b23d7d01d7b.png

安装完成后出现一个node_modules文件夹就算成功了

第二步 :删除app.json中的"style":"v2"

第三步:在详情中基本配置中勾选npm模块

4a43b854858547cc93d9d006566afd48.png

第四步:点击工具——>构建npm

构建成功即可

37b21fb4d109424f83950d65280cf7c5.png

到此为止项目就已经安装完毕了

接下来就是如何用vant

比如这里用按钮控件就必须先引入按钮的配置

0f2d6d48b8cd4642a6231197d8f521da.png


19962b599c8f433b9aac16d7e1746669.png

aacdbc5123094ba7b2bf8a10a607485b.png

app.json是全局的,index.json只对当前文件有用

效果显示如下:

565dce6ef4dc410482e05615f3276b55.png

比如还想引入单元格样式

3568c74999f14c4e87f8e0daaa131c0c.png

4983a44e5df049638572acb2b65ec0f0.png

0c008c9fa5544af28732daca466ee58c.png



相关文章
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
679 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
740 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
144 7
|
3月前
|
小程序 搜索推荐 JavaScript
微信小程序使用Vant
微信小程序使用Vant
138 2
|
3月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
50 1
|
3月前
|
SQL 监控 小程序
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
166 58
|
2月前
|
XML 小程序 前端开发
小程序制作教程
小程序制作教程
78 3
小程序制作教程
|
3月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
239 1
|
2月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
85 5