npm构建vant小程序

193 阅读1分钟

1、新建一个小程序项目
2、在小程序项目文件夹cmd终端中输入npm init -y构建package项目
3、在cmd终端中输入 npm i @vant/weapp -S --production 下载vant文件
4、在小程序项目本地设置中打开“使用npm模块”开关
5、在小程序工具中打开“构建npm”
6、在 app.json 文件中 删除 "style": "v2" 。小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
7、在 app.json 文件或 页面的json文件中引用vant组件,如

{
  "usingComponents": {
    "van-calendar": "@vant/weapp/calendar/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-checkbox": "@vant/weapp/checkbox/index",
    "van-checkbox-group": "@vant/weapp/checkbox-group/index"
  }
}

8、在页面中使用vant组件

<van-cell title="展示弹出层" is-link bind:click="showPopup" />
<van-popup show="{{ popupShow }}" bind:close="onPopupClose" closeable close-icon="close" close-icon-position="top-right" position="center" custom-style="height: 10%;width: 50%;text-align: center;">
    内容
</van-popup>