Uniapp 导入 Vant 组件库

Vant Weapp

开发文档

Vant Weapp - 轻量、可靠的小程序 UI 组件库

创建 wxcomponents 目录

在 uniapp 项目的根目录下，创建一个新的 wxcomponents 目录

下载 vant-weapp 项目

$ git clone git@gitee.com:vant-contrib/vant-weapp.git

下载下来后，把 vant-weapp 项目下的 dist 目录整个拷贝到上面新建的目录 wxcomponets 中，并把 dist 目录改名为 vant

pages.json 引入组件

在 uniapp 项目的 pages.json 文件中的 globalStyle 属性中使用 usingComponents 引入 vant 组件

"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","usingComponents": {"van-button": "/wxcomponents/vant/button/index","van-cell": "/wxcomponents/vant/cell/index","van-cell-group": "/wxcomponents/vant/cell-group/index","van-icon": "/wxcomponents/vant/icon/index","van-image": "/wxcomponents/vant/image/index","van-row": "/wxcomponents/vant/row/index","van-col": "/wxcomponents/vant/col/index","van-popup": "/wxcomponents/vant/popup/index","van-toast": "/wxcomponents/vant/toast/index"}

使用 vant 组件

在页面中使用组件

<view><van-button type="default">默认按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button></view>

引入 vant 样式

在 App.vue 文件中的 style 处增加 vant 样式

<style>/*每个页面公共css */@import '/wxcomponents/vant/common/index.wxss';
</style>

导入后，就可以在页面中使用 vant 的样式了

<view class="van-ellipsis">这是一段宽度限制 250px 的文字，后面的内容会省略。</view>

Uniapp 导入 Vant 组件库相关推荐

微信小程序（五）--- Vant组件库，API Promise化，MboX全局数据共享，分包相关
目录一.npm包 1.Vant Weapp (1)安装Vant组件库 (2)使用Vant组件 (3)定制全局主题样式 2.API Promise化 (1)基于回调函数的异步API的缺点 (2)API ...
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
No8.网易云音乐案例知识点自测知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...
【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
使用原生开发高仿瑞幸小程序（一）：使用 Vant 组件库和配置多页面
本文由图雀社区认证作者曾伟@喵先森写作而成,图雀社区将连载其使用原生开发高仿瑞幸小程序系列,点击阅读原文查看作者的 infoQ 链接,感谢作者的优质输出,让我们的技术世界变得更加美好???? 源 ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
有赞Vant组件库的引入及轮播图片预览的实现
有赞Vant组件库的引入及轮播图片预览的实现 1.图片预览组件ImagePreview 这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可: ImagePre ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
用一用Vant组件库
目录一.Vant是什么? 二.小案例 2.1 准备工作 2.2 功能实现三.总结本篇文章主要讲述如何在Vue2中使用Vant2组件库,面向会Vue基础初次使用Vant组件库的对象,大概阅读时间5 ...

Uniapp 导入 Vant 组件库

Uniapp 导入 Vant 组件库

Vant Weapp

创建 wxcomponents 目录

下载 vant-weapp 项目

pages.json 引入组件

使用 vant 组件

引入 vant 样式

Uniapp 导入 Vant 组件库相关推荐

最新文章

热门文章