小程序mpvue中引入vant Weapp

2018-11-22 22:56:55 3,817 views

vant Weapp组件使用

1.下载安装组件库

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

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

# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --production

方式二. 下载代码

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

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

我使用的是第二种方式,clone到本地后。找到项目目录下的dist文件,找到你要用的几个组件, 还有依赖。

2.将dist文件放到工程目录下的static目录下面

可以重命名为vant

common,mixins为依赖文件,如果不导入,直接使用的话会报错。)(我的因为少引入了依赖文件,报错了。)

目录结构

3.为需要使用自定义组件的Page进行配置

我要在index.vue中使用timePicker组件,需要在main.json中引入配置即可使用

{

"navigationBarTitleText": "定制需求",

"usingComponents": {

"van-datetime-picker": "/static/vant/datetime-picker/index"

}

}

8

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。