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

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

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

    初始化 npm

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

    构建 npm

    成功提示.png

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

    使用 npm 构建项目

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

    初始化 vant-webapp

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

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}
  1. 在 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;
}

  1. 编译运行结果


    成功引入 vant-webapp
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容