微信小程序安装VantWeapp框架流程

最新推荐文章于 2025-11-26 14:05:36 发布

原创最新推荐文章于 2025-11-26 14:05:36 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #npm #小程序

微信小程序专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何通过Vant Weapp组件库快速构建微信小程序。内容涵盖小程序创建、npm初始化、vantweapp安装、构建npm模块及具体组件使用步骤。通过简单的配置即可在项目中引入丰富美观的UI组件。

备忘一下，经常会忘记

一、官网

Vant Weapp

二、新建小程序

这步不用教吧

三、npm初始化

先这样
在这里插入图片描述
然后输入命令

npm init

在这里插入图片描述

四、安装vant weapp

npm i @vant/weapp -S --production

在这里插入图片描述

五、构建npm模块

在这里插入图片描述

六、使用

在index.json中

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/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>