小程序如何使用vant - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

小程序如何使用vant

发表时间:2020-9-29

发布人:葵宇科技

浏览次数:52

https://youzan.github.io/vant-weapp/#/quickstart

一、安装

cnpm i @vant/weapp -S --production

二、构建 npm 包

在这里插入图片描述

三、修改 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>


相关案例查看更多