【微信小程序】第三方UI组件库vant weapp入门

1. 鼠标移动至目录miniprogram上，单击鼠标右键，点击“在外部终端窗口中打开”，打开命令窗口
   

2. 在命令窗口中执行命令： npm init -y，创建package.json文件

3. npm i @vant/weapp -S --production，安装vant weapp
   npm i 同 npm install
-S 同 --save
-D 同 --save-dev

4. 工具>构建npm，miniprogram下新增子目录miniprogram_npm
   
   遇到如下报错：
   [ miniprogram/miniprogram_npm/@vant/weapp/nav-bar/index.json 文件内容错误] miniprogram/miniprogram_npm/@vant/weapp/nav-bar/index.json: [“usingComponents”][“van-icon”]: “…/icon/index” 未找到。
   试过卸载重装vant weapp，但依然失败，最后的解决方法是，将 miniprogram_npm\@vant\weapp 下的内容全部清除，并将 node_modules\@vant\weapp\dist 下的所有内容复制于此。

5. 详情>本地设置，勾选“使用npm模板”
   

6. pages/test/test.json中声明所引用组件对应的文件路径

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

7. pages/test/test.wxml中引用vant weapp的button组件

<!-- pages/test/test.wxml -->
<view class="box">
  <van-button type="danger">危险按钮</van-button>
</view>

/* pages/test/test.wxss */
.box{
  text-align: center;
  margin: 10rpx;
}