小程序如何使用vant

今天药忘吃喽~ 2022-12-11 07:54 122阅读 0赞

[https://youzan.github.io/vant-weapp/\#/quickstart][https_youzan.github.io_vant-weapp_quickstart]

### 一、安装 ###

cnpm i @vant/weapp -S --production

### 二、构建 npm 包 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

### 三、修改 app.json ###

将 `app.json`中的`"style": "v2"`去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

### 四、注册组件 ###

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
    // app.json
    "usingComponents": { 
        "van-button":"/miniprogram_npm/vant-weapp/button/index"
    }

### 五、使用组件 ###

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

### 下载源代码的方式使用 vant ###

1.  下载

git clone git@github.com:youzan/vant-weapp.git

1.  将下载好项目中的`dist`目录拷贝到小程序目录下，改名为`vant`
2.  在`app.json`中全局注册

"usingComponents":{ 
        "van-button": "/vant/button/index"
    
      },

1.  在任意wxml中使用

<van-button type="primary">按钮</van-button>

[https_youzan.github.io_vant-weapp_quickstart]: https://youzan.github.io/vant-weapp/#/quickstart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3682a1c32f70411b8668418e9e58ff5c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序vant-weapp-商品卡片列表

用过小程序的几个框架，最后还是选择了用vant-weapp，喜欢这款框架的原因，可能就是它里面的组件很多，很丰富，够用，在我的业务场景里面，大部分的需求都是可以在这个框架里面找

分手后的思念是犯贱/ 2022年12月26日 09:20/ 0 赞/ 363 阅读

相关小程序使用组件库 vant-weapp详细教程

要说到小程序开发过程中用到的UI组件库，我第一个想到的就是vant，因为对于我来说，这个组件库里面的UI界面比较符合我的审美，颜值还不错，另外最重要的是，里面的功能比较齐全，项

旧城等待，/ 2022年12月20日 05:38/ 0 赞/ 156 阅读

相关小程序vant-weapp的日历组件的使用

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：[https://github.com/youzan/

╰半橙微兮°/ 2022年12月20日 01:27/ 0 赞/ 172 阅读

相关小程序vant-weapp的日历组件的使用

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：[https://github.com/youzan/

秒速五厘米/ 2022年12月19日 01:30/ 0 赞/ 253 阅读

相关小程序使用组件库 vant-weapp详细教程

要说到小程序开发过程中用到的UI组件库，我第一个想到的就是vant，因为对于我来说，这个组件库里面的UI界面比较符合我的审美，颜值还不错，另外最重要的是，里面的功能比较齐全，项

拼搏现实的明天。/ 2022年12月15日 14:03/ 0 赞/ 372 阅读

相关小程序如何使用vant

[https://youzan.github.io/vant-weapp/\/quickstart][https_youzan.github.io_vant-weapp_qui

今天药忘吃喽~/ 2022年12月11日 07:54/ 0 赞/ 123 阅读

相关 Vant IndexBar 在小程序中的简单使用

这篇文章是老王的朋友超超提供的，上午已经更新到原创微信公众号「软件老王」，[链接][Link 1]，欢迎各位朋友关注老王的原创公号！先看下最终效果图，主要是渲染一个`A -

约定不等于承诺〃/ 2022年12月08日 14:14/ 0 赞/ 161 阅读

相关【小程序实战】echarts以及vant组件的使用

一、效果呈现 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

冷不防/ 2022年11月25日 11:41/ 0 赞/ 542 阅读

相关微信小程序整合使用Vant

文章目录 1、安装 2、输入\`npm init --yes\`完成初始化 3、回到微信开发者工具 4、修改 app

野性酷女/ 2022年10月22日 09:07/ 0 赞/ 4 阅读

相关 Wx-小程序使用Vant UI

一、初始化package.json npm init 二、安装Vant UI npm i vant-weapp -S --production 三、安装

谁践踏了优雅/ 2021年12月12日 02:19/ 0 赞/ 353 阅读