如何使用第三方ui库vant-weapp

如何使用第三方ui库vant-weapp

1==》创建文件夹demo

2==》 在小程序 中打开 注意  要先在小程序中打开

如果要想在小程序的开发工具中打开某一个 文件夹

要么是空文件夹 要么有一个 project.config.json的配置

2==》 cmd ==> npm init -y  生成包描述文件  package.json

按照官网提示

3==》npm i @vant/weapp -S --production  注意版本

4==》步骤二 构建 npm 包

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

5==》引入组件

以 Button 组件为例，只需要在app.json 中添加如下

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

6==>在某个页面就可以使用了按钮了

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>

使用第三方库的注意点###

在使用其他组件时，要引入与之对应的组件

注意组件是否正确

"usingComponents": {
  "van-cell": "path/to/@vant/weapp/dist/cell/index",
  "van-cell-group": "path/to/@vant/weapp/dist/cell-group/index"
}

上面这种  引入要不得

将path/to去除  dist也要去除。

正确应该为

"van-cell": "@vant/weapp/cell/index",
 "van-cell-group": "@vant/weapp/cell-group/index"

否则找不到路径  会报错