微信小程序使用vant（记录）

1.因为微信开发者工具不能输入且只有基础的文件，所以用的vscode

2.终端输入npm init 一路回车，生成package.json文件

3.npm install --production，生成package-lock.json文件

4.按照vant 官网快速上手章节

步骤一 通过 npm 安装

npm i @vant/weapp -S --production

会报错：源文本中存在无法识别的标记

解决：使用双引号或者单引号包住依赖名

npm i '@vant/weapp' -S --production

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除

步骤三 修改 project.config.json

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

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

步骤四 构建 npm 包

5.使用，在app.json中配置后在所有组件都可以使用

// 通过 npm 安装
// app.json 
"usingComponents": { 
 "van-button": "@vant/weapp/button/index" 
}

我使用js，到此大功告成