uni-app中使用vant开发小程序

vant 小程序版官方地址:https://github.com/youzan/vant-weapp

许多人启动的时候会用浏览器调试小程序,需要用小程序模拟器来进行调试,否则会提示读不到node_modules中的数据

安装

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包,详见 npm 支持

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

方式二. 下载代码

直接通过 git 下载 Vant Weapp 源代码,并将dist目录拷贝到自己的项目中

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

使用组件

以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可

{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}

接着就可以在 wxml 中直接使用组件

按钮

使用小程序模拟器运行

uni-app中使用vant开发小程序_第1张图片

你可能感兴趣的:(uni-app,小程序)