vant weapp组件的完整安装步骤（跳过官方文档的那些坑）

最新推荐文章于 2024-09-13 21:35:37 发布

招手熊

最新推荐文章于 2024-09-13 21:35:37 发布

阅读量1.8k

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/dorlolo/article/details/113924150

版权

小程序开发专栏收录该内容

3 篇文章

订阅专栏

注意：vant weapp组件当前版本：1.5.3，其它版本不能保证是否适用
vant weapp组件版本

安装步骤

安装node.js，小朋友都会，跳过安装教程。
通过微信开发者工具创建一个项目。然后进入终端（用cmd命令打开项目项目目录也行）。
执行命令npm init -y ，创建package.json文件。
执行以下命令，安装vant插件
```
npm i @vant/weapp -S --production
```
安装后，项目中会多出一个node_modules目录。
删除node_modules目录中的@types目录。

手动在 project.config.json 修改如下参数。

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

最终效果：
在这里插入图片描述

勾选使用npm模块
选择构建npm
App.json中删除以下代码，记得把上面一行末尾的逗号去掉。（否则会和原生样式有冲突）
如果使用appid（非测试号）创建的项目，需要把miniprogram_npm这个目录移动到miniprogram目录里面不然报错。
想要使用vant css样式的，按照官方文档方法会报错找不到路径，不想额外折腾了，打开app.wxss,输入如下内容。
```
 @import '/miniprogram_npm/@vant/weapp/common/index.wxss'
```
结束