【01】使用npm构建项目，引入Vant-webapp框架

vant-webapp : https://vant-contrib.gitee.io/vant-weapp

1. 在项目根目录打开命令窗口，使用命令 npm init -y 初始化npm
   

   初始化 npm

2. 点击菜单 工具 -> 构建npm，提示完成，则表示构建npm已完成
   

   构建 npm
   成功提示.png

3. 使用npm模块构建项目，打开项目中的 project.config.json 文件，点击右上角 详情 -> 本地设置 勾选 使用 npm 模块，确认配置文件中的 packNpmManually 和 packNpmRelationList 属性如图第二步所示
   

   使用 npm 构建项目

4. 使用命令 npm i @vant/weapp -S --production 初始化vant-webapp
   

   初始化 vant-webapp

5. 使用 button 组件，测试是否成功引入 vant-webapp，在需要使用此组件页面的 json 文件中设置 usingComponents ，如需全局使用，则在根目录下的 app.json 中设置即可

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

6. 在 index.xml 和 index.wxss 中添加以下代码，保存编译，若成功显示按钮，则引入成功

<!-- index.wxml -->

<view class="index-page">
  <van-button type="info">信息按钮</van-button>
</view>

/* index.wxss */

.index-page {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

7. 编译运行结果

   
   成功引入 vant-webapp