微信小程序构建vant组件全过程

前提电脑已经安装了npm，如果没有可以参考我的另外一篇博客。

1.新建一个项目

2.打开项目中的一个文件夹，在磁盘中打开

3.在打开的项目目录中新建一个 miniprogram_npm 文件夹

4.然后回到微信开发工具，待刷新后点击刚才新建的文件目录 单击右键 选择在终端中打开。

5.打开后在命令行里  输入   npm init  回车。

然后提示构建package.json文件，根据自己的需求逐一填写，如果不需要，可以一直回车即可。

最后输入  yes  构建 package.json完成。（或者直接回车 默认生成package.json文件）

6.此时即可 构建 npm包，根据自己的需求 ，在命令行里输入  回车（安装方式可以查看自己所使用的包，一般github，或者开源项目会有安装npm方式，复制即可） 列如：npm install xxxxx.js，我以使用Vant Weapp 控件为例，

npm i vant-weapp -S --production  回车

7.安装完毕后，回到微信开发者工具，待刷新后，点击右上角的  详情  按钮，在弹出菜单中勾选 使用构建 npm。

8.构建之前的配置。

需要将app.json中的style删掉，因为小程序最新版本的内置方法的样式会覆盖掉vant的样式

配置project.config.json文件。

"setting": {

    .......

    "packNpmManually": true,

    "packNpmRelationList": [

      {

        "packageJsonPath": "./miniprogram_npm/package.json",

        "miniprogramNpmDistDir": "./"

      }

    ],

   ......

  },

注意：此处packageJsonPath的路径应对应到新建的miniprogram_npm文件夹

           此处的miniprogramNpmDistDir文件夹的路径默认为"./"否则可能报错。

9.点击  工具  构建npm 。

构建完成后即可在项目中使用。在相应  js  中使用 引入即可。

参考博客：https://blog.csdn.net/qq_32852047/article/details/90234484