vant-ui 使用

记录近期所使用vantui组件的过程
使用过程中用到的vant文档
https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang

一.vant-ui的团队

Vant 开源的移动端组件库是由有赞前端团队开发的，于 2017 年开源。有赞前端团队，几乎所有的微信用户他关注的公众号当中，就会有一个页面是由有赞来进行搭建维护和管理的

二.安装

方式有很多,最常用的就是通过npm或者yarn在项目中进行安装

npm 安装方式

在vue2.x项目当中使用指令 npm i vant -S
在vue3.x项目当中使用指令 npm i vant@next -S

使用脚手架安装方式

在使用图形化构建项目方式 vue ui
在构建项目过程中在 依赖 -> 安装依赖 找到vant
选用vant-ui进行项目开发

使用cdn方式使用

在 html 文件中引入 CDN 链接

引入样式文件
引入vue.js文件
引入vant.js文件

三.引入组件方式

方式一自动按需引入组件 (推荐)

自动按需引入组件方式需要我们在项目中下载一个babel插件,
简单配置一下,它会在编译过程中将import的写法自动转换为按需引入的方式,不然可能就需要我们手动的引入样式和组件
使用步骤 项目中:

安装 babel-plugin-import插件 npm i babel-plugin-import -D
配置
1. 现在基本使用babel7 所以对babel7以下场景的配置方法不作记录
2. 详情可参考文章开头所给链接
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式import { Button } from 'vant';

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
};

Tips: 如果你在使用 TypeScript，可以使用ts-import-plugin实现按需引入。

方式二手动按需引入组件

在没有安装插件的情况下,我们还有一个办法使用vant
不厌其烦地引入对应组件的样式
不厌其烦地引入对应的组件

import Button from 'vant/lib/button';
import 'vant/lib/button/style

方式三导入所有组件

方式三是最粗暴的在项目中使用vant的方式之一,因为Vant 支持一次性导入所有组件，这样做虽然简单粗暴,但是引入所有组件会增加代码包体积，会导致项目运行很慢,因此不推荐这种做法。
下面是导入所有组件的使用过程

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);

Tips: 配置按需引入后，将不允许直接导入所有组件。

使用组件

使用所有组件都是一样,就三个字看文档
根据文档所描述的使用方法,在开发业务过程中,对应相应的场景进行使用

vant-ui 使用相关推荐

vant显示日期格式_Vue+Vant ui实现日期时间选择
Vue+Vant ui实现日期时间选择 1.安装Vant ui npm i vant -S 2.在 main.js 中引入 Vant ui // 引入vant import Vant from 'va ...
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
目录一.项目技术二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件三.分析页面实现功能 1.路由页面准 ...
Vue2：使用Vant UI实现网易云评论页上拉和下拉刷新
目录一.项目数据API接口地址二.实现页面效果三.实现思路四.实现思路代码 1.发送ajax请求获取20条评论 2.下拉触发onRefresh事件 3.上拉触发onLoad事件五.实现功能完 ...
【实战项目惜时App需求分析说明书】Vue-cli3+Vant UI+Vue-element-admin+Egg.js+Mysql
小编的第二个全栈项目,接下来会继续推出其中的源码设计和功能分析博客,大家多多支持呀! 项目源码地址: https://gitee.com/lwkgood/time-client (客户端) https ...
uniapp使用Vant ui
uniapp项目中如何使用Vant ui uniapp常用框架有很多,例如uview,colorUI,当然还有dcloud团队打造的插件库等等.一般手机App开发使用这些框架或者组件库已经足够了.但是 ...
【vant ui 双向输入框禁止手机键盘弹出】
vant ui 双向输入框禁止手机键盘弹出 <van-field readOnly @focus="noBomBox" :formatter="formatterN ...
Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
Vant UI使用iconfont自定义图标
在使用Vant UI做h5页面时,不可避免的会使用到各种小图标,但是Vant 官方提供的图标是有限的,考虑到这种情况,vant也提供了一种方法去自定义图标,自定义图标.可能有些同学看到这里也是一头雾水 ...
vue-cli3+ 、vant UI、移动端适配
前言:一直用的vue-cli2,趁着不忙,记录下使用cli3+的点滴. 如果帮助到了你,还请点个赞!!!!! 1.nodejs 具体下载安装不在赘述:详见菜鸟教程--nodeJs安装或者官网:no ...

vant-ui 使用

vant-ui 使用

一.vant-ui的团队

二.安装

npm 安装方式

使用脚手架安装方式

使用cdn方式使用

三.引入组件方式

方式一自动按需引入组件 (推荐)

方式二手动按需引入组件

方式三导入所有组件

使用组件

vant-ui 使用相关推荐

最新文章

热门文章

vant-ui 使用

vant-ui 使用

一.vant-ui的团队

二.安装

npm 安装方式

使用脚手架安装方式

使用cdn方式使用

三.引入组件方式

方式一 自动按需引入组件 (推荐)

方式二 手动按需引入组件

方式三 导入所有组件

使用组件

vant-ui 使用相关推荐

最新文章

热门文章

方式一自动按需引入组件 (推荐)

方式二手动按需引入组件

方式三导入所有组件