在小程序项目中使用npm安装Vant组件库

前言：

        1、初识微信小程序开发，此文章仅记录在实践过程中遇到的问题及对应的解决方式

        2、安装过程是按照weapp开发指南中的步骤进行的

步骤：

1、通过npm 安装

npm i @vant/weapp -S --production

2、修改app.json

 将app.json中的"style":"v2"去除，避免造成样式混乱

3、修改project.config.json文件

【按照文档添加packNmpManually，packNpMRelationList配置项，如已存在配置项，确保属性值 是正确的】此处miniprogramNpmDistDir的值和文档中不同

4、构建npm 【因为我的本地设置中没有 ‘使用npm模块’，所以省去了勾选的一步】

5、在app.json中全局配置组件

6、在页面中使用及效果

遇到问题：

1、npm init 初始化时报错 【左图是新建项目后的项目结构，右图是进行npm init 初始化后的项目结构和报错信息】（虽说报错了，但是结构中还是出现了package.lock.json文件），这里的错误没有影响，所以选择了继续往下进行

 2、执行 npm i @vant/weapp -S --production 【执行完命令，项目结构中再次发生变化】

3、 执行【工具--构建npm】，执行构建npm后项目结构再次发生变化。注意：如果构建后是miniprogram_npm文件下是@vant文件夹，可以按照文档中的方式在app.json中引入全局挂载组件。如果是和右侧图片中展示的一样，需要把路径改为“vant-weapp/button/index”