用Vant组件库来做移动端UI界面能有多方便?🚀🚀🚀
前言
最近写一个移动端的项目,用到了vant做UI界面设计,不得不再次感叹开源的力量,这个组件库封装的实在是太优雅了,只要你愿意看官方文档,就不会担心看不懂,也不会担心不会用,接下来就带大家去浅尝一下这个组件库。官网文档:Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)
Vant
Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。
可以看到,移动端
,用来做移动端
的ui界面。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。
特性
- 🚀 性能极佳,组件平均体积小于 1KB(min+gzip)
- 🚀 80+ 个高质量组件,覆盖移动端主流场景
- 🚀 零外部依赖,不依赖三方 npm 包
- 💪 使用 TypeScript 编写,提供完整的类型定义
- 💪 单元测试覆盖率超过 90%,提供稳定性保障
- 📖 提供丰富的中英文文档和组件示例
- 📖 提供 Sketch 和 Axure 设计资源
- 🍭 支持 Vue 2、Vue 3 和微信小程序
- 🍭 支持 Nuxt 2、Nuxt 3,提供 Nuxt 的 Vant Module
- 🍭 支持主题定制,内置 700+ 个主题变量
- 🍭 支持按需引入和 Tree Shaking
- 🍭 支持无障碍访问(持续改进中)
- 🍭 支持深色模式
- 🍭 支持服务器端渲染
- 🌍 支持国际化,内置 30+ 种语言包
没错,这是官网复制来的介绍。
那么从官方文档可以看到目前这是Vant4.x,适用于vue3,如果你用的是vue2,那么就用Vant2。我们切换到快速上手,就能看到如何快速入门使用
Vant使用
1.安装
在现有项目中使用 Vant 时,可以通过 npm
进行安装:
# Vue 3 项目,安装最新版 Vant
npm i vant
# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2
看得出来,非常优雅,最新版直接安装vant,如果不是最新的才加了些-2...
当然,你也可以通过 yarn
、pnpm
或 bun
进行安装:什么方式都有,大家可以自己参照官方文档。
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant
# 通过 Bun 安装
bun add vant
那么引入之后如何使用呢?我们常常需要做一个登陆注册页面,看看有了vant组件库之后,我们还需要去切页面吗?
此处我们需要放一个表单,接下来我们查阅官方文档,看看vant的表单如何使用。
2.引入
写的很清楚,表单会用到三个组件,我们只需要从vant库中引入这三个组件,然后都use掉即可
import { createApp } from 'vue';
import { Form, Field, CellGr0up } from 'vant';
const app = createApp();
app.use(Form);
app.use(Field);
app.use(CellGr0up);
引入之后,就可以在我们需要用到表单的页面使用了。直接将他写好的表单复制到我们的代码中
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field
v-model="username"
name="用户名"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field
v-model="password"
type="password"
name="密码"
label="密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
</van-cell-group>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
提交
</van-button>
</div>
</van-form>
可以看到,它使用了v-model双向绑定,因此我们就需要自己去定义一个username、passwor...看需要用到什么,然后官方文档就直接了当告诉我们了这些变量
import { ref } from 'vue';
export default {
setup() {
const username = ref('');
const password = ref('');
const onSubmit = (values) => {
console.log('submit', values);
};
return {
username,
password,
onSubmit,
};
},
};
- 注意他这里提交表单事件,直接接收了一个参数values,事实上这个values可以直接通过values.name,我们input框上的name属性代表的input框拿到的数据,在这里其实就是values.用户名,所以我们可以直接改成英文,如:values.username。
在官方文档上也能看见他的样式,甚至可以做校验
除此之外,再介绍一个,例如微信中点击某个东西成功之后,就会弹出一个弹出框,打勾,或者失败,如果这么一个UI界面要我们自己去写可能多少也有点麻烦,但是vant都给我们封装好了
引入
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from 'vue';
import { Toast } from 'vant';
const app = createApp();
app.use(Toast);
显然就是引入一个封装好了的Toast组件,然后use掉,vant官方都给我们想好了,一般这种弹出提示框都是我们js中做判断,如果成功就弹出,因此一般都出现在函数里面,官方就直接给我们打造了函数调用的方式
import { showToast } from 'vant';
showToast('提示内容');
全局引入依赖之后,在js中直接引入,然后直接调用就能出现效果,帮助咱们切图仔省去了不少麻烦事儿。
除了成功、失败,他甚至可以自定义写图标,也是极度舒适了。
看看我的登录页面是如何使用的:
<template>
<div class="login">
<h1>登录</h1>
<div class="login-wrapper">
<div class="avatar">
<img src="https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png" alt="">
</div>
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field v-model="username" name="username" label="用户名" placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]" />
<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]" />
</van-cell-group>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
登录
</van-button>
</div>
</van-form>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import axios from '@/api/index.js'
const password = ref('')
const username = ref('')
// 登录
const onSubmit = (values) => {
// console.log(values); // 用户输入的账号和密码对象 name作为key
// 发送接口请求给后端 校验数据
axios.post('/user/login', {
username: values.username,
password: values.password
}).then((res) => {
console.log(res);
})
}
</script>
<style lang="less" scoped>
.login {
width: 100vw;
height: 100vh;
background-color: #fff;
padding: 0 0.3rem;
box-sizing: border-box;
overflow: hidden;
h1 {
height: 0.6933rem;
text-align: center;
font-size: 0.48rem;
margin-top: 1.12rem;
}
.login-wrapper {
width: 7.44rem;
height: 10.77rem;
border: 1px solid rgba(187, 187, 187, 1);
margin: 0 auto;
margin-top: 1.7rem;
border-radius: 0.3rem;
box-shadow: 0 0 0.533rem rgba(170, 170, 170, 1);
.avatar {
width: 2.4rem;
height: 2.4rem;
margin: 1rem auto 0.77rem auto;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
}
}
}
}
:deep(.van-cell__title.van-field__label) {
width: 45px;
}
</style>
非常方便,跟着上述步骤,官方文档写的很清楚,直接贴上去就实现了,然后自己再加一些less样式。
那么其他的就不做过多介绍了,大家在做项目需要用到一些东西的时候,直接查阅官方文档,直接拿去用即可。Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)
在这里我写的都是rem单位,目的是做移动端的适配,根据宽度调整fontsize的大小,其实也可以通过vant封装好的移动端适配组件来做,这里不做过多介绍了。
小结
Vant 是一个轻量、可靠的移动端组件库,可用于快速构建风格统一的移动端 UI 界面。它提供了一系列高质量的组件,涵盖了导航、表单、按钮、列表、轮播图等常用功能。
我们只需要安装依赖后引入依赖还有在全局中引入他的整份css代码,最后按需取组件,就能轻松完成ui界面设计。
来源:juejin.cn/post/7389577588174503936