微信小程序整合Vant Weapp 步骤

微信小程序整合Vant Weapp 步骤

步骤总结：
1、小程序项目创建
2、安装Vant Weapp（打开cmd命令窗口，进入项目文件夹，按顺序执行下面命令）
	1）npm init
	2）npm i @vant/weapp -S --production
3、安装完成后，修改app.json
	1) 去掉"style": "v2" 
4、修改packpage.config.json
	"setting": {
		.....
   		"packNpmManually": true,
    	"packNpmRelationList": [
      		{
        		"packageJsonPath": "./package.json",
       	 		"miniprogramNpmDistDir": "/"
      		}
    	]
    	......
    }
 5、开启使用npm模块
 	在软件右上角“详情”--->“本地设置”--->勾选上使用npm模块
 6、构建npm
 	在软件左上角“工具”--->“构建npm”
 7、最后在app.json引入组件即可,如：
 	"usingComponents": {
    	"van-button": "@vant/weapp/button/index"
  	}

图文如下：

1、小程序项目创建
创建项目后的目录

2、安装Vant Weapp
说个微信开发者工具的坑：正常情况下，在微信开发者工具里的终端就可以进行安装 Vant Weapp。但是我的开发工具硬是输入不了文字。无奈只能用电脑cmd命令行（工具终端和cmd命令行都没啥区别），微信团队也不填下坑。。。。。
回归正题---------------------------------------------
打开项目文件夹，在地址栏输入cmd 回车

在弹出的cmd窗口 输入 npm init 回车

init 后，会要你输入和确认一些信息

信息可填可不填，直接回车，会有默认值的（我就是回车到底，嘻嘻）

init操作完成后，发现项目根目录会多出package.json文件

紧接着执行 npm i @vant/weapp -S --production 安装命令

看到下图界面多出node_modules文件夹，说明vant/weapp已成功拉取到项目目录里

cmd命令行到此结束--------------------------------
回到开发工具===》
3、配置@vant/weapp环境
（1）将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

（2）修改 project.config.json

"packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "/"
      }
    ]

把上面配置替换掉下图红框内容

（3）使用npm模块

构建npm


构建npm完成后，会多出miniprogram_npm

最后一步，在app.json引入想要使用的vant组件

"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }

引入结束后，就可以到wxml页面使用啦