uniapp引入vant UI

1. 打开命令行，通过命令npm init -y创建package.json配置文件，项目名称最好不要包含中文

npm init -y

1. 下载vant uI

• vue3创建的uniapp 直接使用以下命令

npm i vant

• vue2创建的uniapp 直接使用以下命令

vue2 : npm i vant@latest-v2

• 或者使用下面命令

npm i @vant/weapp -S --production
下载之后根目录会多一个node-modules

1. 在页面中使用

• 在根目录下和pages同级创建一个wxcomponents文件夹，将node_modules里的 vant 下的dist复制一份到wxcomponents/vant里

• 在pages.json里面引用- 第一种引用方法, 使用那个引用那个 或 根据需求引用"globalStyle": { "backgroundColor": "#F8F8F8", "usingComponents": { "van-button": "/wxcomponents/vant/button/index" } }- 第二种使用easycom自动批量移入组件> easycom：只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用``````// 在pages.json里的globalStyle同级下添加"easycom":{"autoscan":true,// 是否开启自动扫描"custom":{"van-(.*)":"@/wxcomponents/vant/$1/index"}}

正则解释：

> “van-(.*)”-----指的是你用的标签，这种@/wxcomponents/vant/$1/index.vue------前面一段是正常路径，$1表示匹配vant下的所有文件夹，index.vue是目标文件，一开始是没有的，编译后会出现

• 在页面中使用- 先在App.vue中引入样式<style>/*每个页面公共css */@importrequired("/wxcomponents/vant/dist/common/index.wxss");</style>- 在页面中使用<van-buttontype="primary">主要按钮</van-button>

直接引用node_modules文件里面的暂时没找到合适方法，有会的大佬可以分享下哈
另外附上借鉴大佬文章：https://huaweicloud.csdn.net/638ef015dacf622b8df8dd21.html