首页IT科技uniapp引入vant(uniapp使用Vant-weapp(最新))

uniapp引入vant(uniapp使用Vant-weapp(最新))

时间2025-06-20 22:41:21分类IT科技浏览5437
导读:目录...

目录

1.先正常创建一个uniapp项目

2.从github下载vant包              ,zip格式的

3.项目根目录下新建wxcomponents/@vant  两个文件夹

 4.把下载好的压缩包解压                     ,

放在刚才创建好的@vant文件下       ,并重命名为weapp

5.App.vue中引入vant的样式 

6.在pages.json文件下的 "globalStyle" 下的

"usingComponents" 中按需引入

7.页面中使用       ,如果没有样式从uniapp重启微信小程序

总结:

1.先正常创建一个uniapp项目

2.从github下载vant包                     ,zip格式的

vant组件包https://github.com/youzan/vant-weapp/releases

3.项目根目录下新建wxcomponents/@vant  两个文件夹

 4.把下载好的压缩包解压              ,

把dist放在刚才创建好的@vant文件下       ,并重命名为weapp

5.App.vue中引入vant的样式 

6.在pages.json文件下的 "globalStyle" 下的 "usingComponents" 中按需引入

因为vant-weapp的按需引入路径皆为"@vant/weapp/button/index"这种格式

所以我们只需要在路径前面去手动添加

/wxcomponents/       这个路径就可以正常使用了

7.页面中使用                     ,如果没有样式从uniapp重启微信小程序

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
织梦怎么改文字(dedecms织梦子栏目获取顶级栏目名称及链接url方法)