微信小程序 - 06_安装Vant前端组件

欢迎访问笔者个人技术博客： http://rukihuang.xyz/

安装Vant Weapp

1. 安装Vant组件库

1.1 通过npm安装（建议指定版本为@1.3.3）

1. 在小程序开发工具的资源管理界面，右键，点击“在外部终端窗口中打开”，定位到项目，并打开终端。

2. 初始化npm的package.json

   npm init -y
   

3. 指定版本号安装vant组件

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

1.2 修改app.json

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

1.3 修改 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配置为’./'即可

1.4 构建npm包

1.5 引入组件

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