Uniapp引入vant-weapp

最新推荐文章于 2024-07-07 09:33:08 发布

Tfishupupup

最新推荐文章于 2024-07-07 09:33:08 发布

阅读量4.7k

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Tfishupupup/article/details/126222855

版权

本文介绍了如何在uniapp项目中全局引入vant-weapp组件库，包括新建wxcomponents目录，克隆或下载 vant-weapp 文件，将dist文件复制到指定位置，通过 app.vue 和 page.json 引入组件，实现全局调用，以及在页面中测试button组件的使用。此外，还提及了 vant 的 notify 组件可能存在的一些问题，以及常用组件名的列举。

摘要由CSDN通过智能技术生成

在网上找了很对文章，看了都是局部引入，没有全局引入的。

1.uniapp新建项目之后，新建wxcomponents目录，跟app.vue同级。

2.接着就是引入vant-weapp的组件文件。

去vant-weapp的github地址把代码clone下来或者直接去官网 npm i

3下载好之后就可以把dist文件复制到wxcomponents下

复制粘贴》》》》》

顺便把dist名称改为vant

4.在对应文件中引用对应文件

app.vue引入@import "/wxcomponents/vant/common/index.wxss";

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

在page.json的globalStyle中引入要用的组件

"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "####",
		"navigationBarBackgroundColor": "#232932",
		"backgroundColor": "#fff",
		"usingComponents": {
			"van-button": "/wxcomponents/vant/button/index",
			"van-