uniapp引入vant UI

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

npm init -y

2. 下载vant uI

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

npm i vant

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

vue2 : npm i vant@latest-v2

• 或者使用下面命令

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

3. 在页面中使用

• 在根目录下和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 */
  		@import required("/wxcomponents/vant/dist/common/index.wxss");
  
  	</style>
  

  • 在页面中使用

  <van-button type="primary">主要按钮</van-button>
  

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