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

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-cell": "/wxcomponents/vant/cell/index","van-cell-group": "/wxcomponents/vant/cell-group/index","van-icon": "/wxcomponents/vant/icon/index","van-image": "/wxcomponents/vant/image/index","van-row": "/wxcomponents/vant/row/index","van-col": "/wxcomponents/vant/col/index","van-popup": "/wxcomponents/vant/popup/index","van-toast": "/wxcomponents/vant/toast/index","van-card": "/wxcomponents/vant/card/index"}

我自己这么引入是可以全局调用的，不用再在每个pages单独使用usingComponents,不知道是所有的还是一些可以用，以后有哦问题在来补充。

5.去每一个页面添加button按钮浅试一下

成功

其他页面也是直接代码van-button就可以使用了。

6.看到有个博主说vant的notify使用有问题，先贴出来，用到了再说。

原文地址

7.还有一些常用的组件名

"usingComponents": { //这里为方便，全局引入了所有组件，也可以在某个page下单独引用某个组件"demo-block": "/wxcomponents/vant/demo-block/index","van-action-sheet": "/wxcomponents/vant/action-sheet/index","van-area": "/wxcomponents/vant/area/index",// "van-badge": "/wxcomponents/vant/badge/index",// "van-badge-group": "/wxcomponents/vant/badge-group/index","van-button": "/wxcomponents/vant/button/index","van-card": "/wxcomponents/vant/card/index","van-cell": "/wxcomponents/vant/cell/index","van-cell-group": "/wxcomponents/vant/cell-group/index","van-checkbox": "/wxcomponents/vant/checkbox/index","van-checkbox-group": "/wxcomponents/vant/checkbox-group/index","van-col": "/wxcomponents/vant/col/index","van-dialog": "/wxcomponents/vant/dialog/index","van-field": "/wxcomponents/vant/field/index","van-goods-action": "/wxcomponents/vant/goods-action/index","van-goods-action-icon": "/wxcomponents/vant/goods-action-icon/index","van-goods-action-button": "/wxcomponents/vant/goods-action-button/index","van-icon": "/wxcomponents/vant/icon/index","van-loading": "/wxcomponents/vant/loading/index","van-nav-bar": "/wxcomponents/vant/nav-bar/index","van-notice-bar": "/wxcomponents/vant/notice-bar/index","van-notify": "/wxcomponents/vant/notify/index","van-panel": "/wxcomponents/vant/panel/index","van-popup": "/wxcomponents/vant/popup/index","van-progress": "/wxcomponents/vant/progress/index","van-radio": "/wxcomponents/vant/radio/index","van-radio-group": "/wxcomponents/vant/radio-group/index","van-row": "/wxcomponents/vant/row/index","van-search": "/wxcomponents/vant/search/index","van-slider": "/wxcomponents/vant/slider/index","van-stepper": "/wxcomponents/vant/stepper/index","van-steps": "/wxcomponents/vant/steps/index","van-submit-bar": "/wxcomponents/vant/submit-bar/index","van-swipe-cell": "/wxcomponents/vant/swipe-cell/index","van-switch": "/wxcomponents/vant/switch/index",// "van-switch-cell": "/wxcomponents/vant/switch-cell/index","van-tab": "/wxcomponents/vant/tab/index","van-tabs": "/wxcomponents/vant/tabs/index","van-tabbar": "/wxcomponents/vant/tabbar/index","van-tabbar-item": "/wxcomponents/vant/tabbar-item/index","van-tag": "/wxcomponents/vant/tag/index","van-toast": "/wxcomponents/vant/toast/index","van-transition": "/wxcomponents/vant/transition/index","van-tree-select": "/wxcomponents/vant/tree-select/index","van-datetime-picker": "/wxcomponents/vant/datetime-picker/index","van-rate": "/wxcomponents/vant/rate/index","van-collapse": "/wxcomponents/vant/collapse/index","van-collapse-item": "/wxcomponents/vant/collapse-item/index","van-picker": "/wxcomponents/vant/picker/index"}

8.其余内容待补充

Uniapp引入vant-weapp相关推荐

关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式
1.在根目录下创建wxcomponents 2.引入vant weapp 1.我们到https://github.com/youzan/vant-weapp下载最新的压缩包 2. 解压,将里面的dis ...
小程序(uniapp) | 引入Vant Weapp
1.找到项目的文件夹,输入cmd 打开终端 2.进入vant官网:Vant Weapp - 轻量.可靠的小程序 UI 组件库先初始化npm init, 再根据 # 通过 npm 安装 npm i @ ...
uniapp 引入vant 2 报错 require is not defined
uniapp 引入vant 2 报错 require is not defined 一.Vue 2 项目,安装 Vant 2 npm i vant@latest-v2 二.main.js 导入Vant ...
微信小程序引入vant Weapp
1.微信小程序的内置终端用不了,只能使用外部终端点击微信开发者工具>视图>命令面板(或者Ctrl+Shift+Alt+P)打开外部终端或者直接Ctrl+Shift+C直接打开 2.打开 ...
uni-app配置Vant Weapp
uni-app配置vant-------浏览器运行环境下不兼容 1.创建uni-app项目 2.创建wxcomponents目录 3. 安装vant需要的模块包 3.1找一个空文件cmd 进入执行 3 ...
uniapp引入 vant
一.下载vant源码方式一:从 Vant 官网首页进入 GitHub下载对应版本的压缩包,将文件解压后备用,确保下载的压缩包里有dist 文件夹方式二:通过npm install 方式引入 npm ...
在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具选择一个模板(这里以javaScript 基础模板为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
HBuilder X中uniapp使用Vant Weapp、uView UI
1.使用Vant Weapp 安装: npm init -y npm i @vant/weapp@1.3.3 -S --production 在项目目录中新建目录wxcomponents,把node_ ...
Day267/300 Mac微信小程序引入@vant/weapp样式不生效问题
(一)需求微信小程序想使用Vant Weapp ,按照官网的步骤安装成功,但是就是不生效--是在真机预览的时候生效,但是在开发工具上的时候不生效. 折腾了一天多,终于解决了,分享给大家. (二)官网 ...
微信开发者工具如何引入 Vant weapp框架
提示:切记不要起中文名字 ,容易报错. 先初始化 npm init -y npm:用 npm i @vant/weapp -S --production yarn 用 yarn add @vant/w ...

Uniapp引入vant-weapp