微信小程序中使用Vant Weapp组件库(保姆式教学)

一、安装

1、打开终端:

  • 点击调试器最右侧这个终端按钮,可以打开终端

微信小程序中使用Vant Weapp组件库(保姆式教学)_第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完成安装

项目目录如下:
微信小程序中使用Vant Weapp组件库(保姆式教学)_第2张图片

二、构建 npm 包

步骤: 打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

微信小程序中使用Vant Weapp组件库(保姆式教学)_第3张图片

三、引入组件

app.json文件中添加:

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

四、使用组件

在需要使用组件的页面的.wxml文件中使用:

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

五、效果:

微信小程序中使用Vant Weapp组件库(保姆式教学)_第4张图片

你可能感兴趣的:(小程序,微信小程序,npm,javascript,Vant,Weapp,组件)