WX小程序--插入第三方组件vant

说明：

在wx小程序的项目中加入第三方组件vant,实现vant组件中样式的调用。
最终测试结果如下所示：以首页为例，根据按钮的type类型，调用van中对应的按钮样式，实现默认按钮、主要按钮、信息按钮、警告按钮、危险按钮的实现

操作准备：

• 安装微信小程序开发工具
• WX小程序–Node.js安装及环境配置（Windows)
• vant小程序版本主页

操作步骤：

1. 创建项目描文件 package.json
2. 安装第三方UI库
3. 设置npm模块
4. 构造npm
5. 查看van插件，选择需要的组件进行测试

内容：

1. 创建项目描文件 package.json
鼠标右击 miniprogram 目录->“在终端中打开”-输入命令 npm init #一直按回车直到结束

出现的错误：
E:\WX-WorkSpace\wxDemo\miniprogram>npm init
‘npm’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。
问题解决：node的环境配置有误，详情查看WX小程序–Node.js安装及环境配置（Windows)
2. 安装第三方UI库
鼠标右击->miniprogram 目录->“在终端中打开” ->npm i vant-weapp -S --production
查看：
鼠标右击miniprogram 目录->硬盘打开–>E:\WX-WorkSpace\wxDemo\miniprogram\node_modules–>找到生成的vant-weapp文件

出现的错误：
E:\WX-WorkSpace\wxDemo\miniprogram>npm i vant-weapp -S --production
npm WARN miniprogram@1.0.0 No description
npm WARN miniprogram@1.0.0 No repository field.
问题解决：在package.json修改description字段并添加repository字段

"description": "demo1",
"repository": {
    "type": "git",
    "url": "http://baidu.com"
  }

3. 设置npm模块

4. 构造npm
点击工具–>选择构造npm即可


5.测试

<!--pages/index/index.wxml-->
 <van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

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