uniapp使用Vant-weapp

内容分享3天前发布
0 3 0

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

uniapp使用Vant-weapp

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

https://github.com/youzan/vant-weapp/releases

uniapp使用Vant-weapp

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

uniapp使用Vant-weapp

4.把下载好的压缩包解压,把dist放在刚才创建好的@vant文件下,并重命名为weapp

uniapp使用Vant-weapp

uniapp使用Vant-weapp

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

@import "/wxcomponents/@vant/weapp/common/index.wxss";

uniapp使用Vant-weapp

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

由于vant-weapp的按需引入路径皆为”@vant/weapp/button/index”这种格式
所以我们只需要在路径前面去手动添加/wxcomponents/这个路径就可以正常使用了

uniapp使用Vant-weapp

uniapp使用Vant-weapp

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

uniapp使用Vant-weapp

8、运行到微信开发者工具即可

uniapp使用Vant-weapp

uniapp使用Vant-weapp

9、所有组件都可按需引入

uniapp使用Vant-weapp

uniapp使用Vant-weapp

uniapp使用Vant-weapp

uniapp使用Vant-weapp

10、六不六?

© 版权声明

相关文章

3 条评论

  • 头像
    Vista看天下 读者

    嘎嘎好使不错不错👍

    无记录
    回复
  • 头像
    霖桉小果 投稿者

    666

    无记录
    回复
  • 头像
    古月sir 投稿者

    [ app.json 文件内容错误] app.json: [“usingComponents”][“van-button”] 未找到 我是用vscode创建项目的 按照你得来 会报这个错误

    无记录
    回复