小程序引入 Vant Weapp 极简教程

一切以 Vant Weapp 官方文档 为准

Vant Weapp 官方文档 - 快速入手

文章目录

• 1. 打开 小程序根目录 的 命令行/终端
• 2. 执行 npm 命令
• 3. 构建 npm
• 4. 去除 小程序基础组件 样式
• 5. 引入组件
• 6. 使用组件
• 7. 效果
• 8. 控制台黄色提示
• • 问题：
  • 解决办法：
  • 9. 构建npm 可能会出现的问题
  • • 问题：
    • 解决办法：

      1. 打开 小程序根目录 的 命令行/终端

      调试器 - 终端 - 新建终端

      或者

      开发工具 - 目录 - 右键 - 在外部中端窗口打开

      或者

      小程序项目目录 - 搜索栏 - 输入cmd - 回车

      ---

      2. 执行 npm 命令

      通过 npm 安装

      npm i @vant/weapp -S --production

      ---

      3. 构建 npm

      工具 - 构建npm

      ---

      4. 去除 小程序基础组件 样式

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

      小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

      ---

      5. 引入组件

      以 Button 组件为例，只需 在app.json或index.json中配置 Button 对应的路径

      建议在app.json中配置，全局配置更加方便，不必在每一个index.json中反复配置

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

      使用全局配置会出现如下黄色提示，不用在意。

      ---

      6. 使用组件

      引入组件后，可以 在 wxml 中直接使用组件

      按钮

      ---

      7. 效果

      ---

      8. 控制台黄色提示

      问题：

      控制台可能会出现数个黄色提示

      解决办法：

      删掉 app.json 中的 "renderer": "skyline", 就行了

      （其实把 renderer、rendererOptions、componentFramework 都删了也行）

      ---

      9. 构建npm 可能会出现的问题

      问题：

      提示：没有找到可以构建的NPM包，请确认需要参与…

      解决办法：

      找到根目录下的 project.config.json 文件

      修改 packNpmManually 和 packNpmRelationList

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