一、安装
1、打开终端:
- 点击调试器最右侧这个终端按钮,可以打开终端
2、执行安装命令
- 通过 npm 安装
npm i @vant/weapp -S --production
- 通过 yarn 安装
yarn add @vant/weapp --production
执行结束我们会发现报错了:
npm WARN saveError ENOENT: no such file or directory, open '/Users/zhangguibao/package.json'
解决: 开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
1、找到 project.config.json
文件,在 setting 中按照如下配置项:
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
2、在终端执行 npm init
项目根目录下会添加一个package.json
文件
3、再次执行npm i @vant/weapp -S --production
完成安装
项目目录如下:
二、构建 npm 包
步骤: 打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
三、引入组件
在app.json
文件中添加:
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
四、使用组件
在需要使用组件的页面的.wxml文件中使用:
<van-button type="primary">按钮</van-button>
五、效果:
![](https://i-blog.csdnimg.cn/blog_migrate/65a1fce5cf1b06d4fa66e865ba4534b0.png)