个人技术分享

一切以 Vant Weapp 官方文档 为准

Vant Weapp 官方文档 - 快速入手

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 中直接使用组件

<van-button type="primary">按钮</van-button>

---

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/"
      }
    ],