微信小程序vant组件引入超级详细实测填坑

微信小程序-vant组件库引入

Step1

到nodejs官网下载一个 一直下一步到安装成功 就可以进入微信小程序项目根目录

https://nodejs.org/zh-cn/

 

 

Step2

进入微信小程序项目根目录 打开外部终端

（直接在蓝色区域右键即可）

 

 

Step3

终端输入 npm init -y 回车 是为了初始化出package.json

 

 

 

 

Step4 

在终端输入 npm i @vant/weapp -S --production

Step5修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

 

Step6

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{  "setting": {

   ...

    "packNpmManually": true,

    "packNpmRelationList": [

      {

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

        "miniprogramNpmDistDir": "./miniprogram/"

      }

    ]

  }}

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

Step7

 

Step8

 

 

链接 https://vant-contrib.gitee.io/vant-weapp#/quickstart