百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

Varlet UI - 被尤雨溪推荐!基于 Vue3 的 Material 风格移动端 UI 组件库

toyiye 2024-04-19 17:33 22 浏览 0 评论

一款优秀的国产移动 UI 组件库,基于 Vue3,还被尤雨溪推荐了,值得关注。

关于 Varlet

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库,自2020年4月21日正式发布 1.0 版本以来,已经持续维护了将近一年的时间。

Varlet 官网

Varlet 的作者是一位专科毕业、来自四川在无锡工作的前端开发者。因所在公司打算开发某个与 Vue3 相关的组件库,他自告奋勇包揽下这个活。后来公司考虑成本、投资回报等原因不打算继续提供支持,作者联合两位好友继续完善下去,发展至今已经拥有十多个因为兴趣和追求而一起维护的小伙伴。热爱可抵岁月漫长,这可能就是开源的魅力所在。

后来 Varlet 不仅获得阮一峰老师的推荐,同时也得到了国内外开源技术社区的认可,其中 Vite 核心团队的 Antfu 大神也接受了这个组件库的 PR。在 Vue3 的 2021 年度总结分享会上,Varlet 还被 Vue.js 的作者尤雨溪推荐了,是一个非常值得关注的前端开源项目。

Varlet 技术特性

  • 提供50个高质量、轻量的通用组件
  • 由国人开发,并且提供完善的中/英文档
  • 支持按需引入和主题定制,支持暗黑模式
  • 支持国际化
  • 支持 webstorm,vscode 编辑器的组件属性高亮
  • 支持 SSR 服务器端渲染
  • 支持 Typescript
  • 确保 90% 以上单元测试覆盖率

Material Design 风格移动组件库

Varlet 是一款移动端 UI 组件库,适用于开发移动 web 应用或者通过 Vue Native 来开发安卓或 iOS 应用。

设计外观上,Varlet 这个组件库是基于谷歌的 Material Design 设计规范进行设计的,提到 Material Design,大部分 UI 组件库都是国外的,无论是文档还是社区,都让部分开发者头痛,Varlet 开发团队参考国外技术社区的成品以及结合国内开发者感兴趣的 api 构建,做出了一款本地化的 Material Design 风格组件库。

移动端有很多像 Vant、uView UI 这样优秀的 UI 组件库,而 Material Design 风格的移动端组件库相对较少,如果希望产品风格有特色,在意交互动效的细节,或者要上架谷歌商店的应用,Varlet 都值得选择。

开发上手体验和感受

Varlet 官方的文档都是由母语是中文的开发者写出来的,是国外的组件库所不能比拟的。代码例子丰富,清晰易懂,开发体验不错。

Varlet 文档

安装 Varlet 非常简单,通过 CDN 引入的方式,引入 varlet.js 一个文件就包含组件库的所有样式和逻辑:

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
<script>
  const app = Vue.createApp({
    template: '<var-button>按钮</var-button>'
  })
  app.use(Varlet).mount('#app')
</script>

当然也支持 Webpack / Vite 工程化:

# npm
npm i @varlet/ui -S

# yarn
yarn add @varlet/ui

# pnpm
pnpm add @varlet/ui
import App from './App.vue'
import Varlet from '@varlet/ui'
import { createApp } from 'vue'
import '@varlet/ui/es/style.js'

createApp(App).use(Varlet).mount('#app')

官网也提供了在线代码编辑工具,方便我们快速体验 Varlet。

Varlet 拥有数十个常用的移动端组件,像骨架屏、导航栏、索引栏等比较复杂难写的组件,体验都很好。同时支持按需引入组件,可以大幅减低打包体积,这对移动端项目很重要。

Varlet 部分组件预览



Varlet 还有很多不错的特性,比如也支持 Vue2,具体可以访问官方网站去了解。

免费开源说明

Varlet 是一款免费开源的移动端 UI 组件库,源码基于 MIT 开源协议托管在 Github 上,任何个人和公司都可以免费下载使用,包括用在商业项目上。

Varlet 引用的图标库是相同风格的 Material Design Icon,数量很多,不用担心不够用,并且同样是免费开源的。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

Varlet UI - 基于 Vue3 的免费开源 Material 风格移动端 UI 组件库,被尤雨溪/阮一峰等大神推荐|那些免费的砖

相关推荐

如何用 coco 数据集训练 Detectron2 模型?

随着最新的Pythorc1.3版本的发布,下一代完全重写了它以前的目标检测框架,新的目标检测框架被称为Detectron2。本教程将通过使用自定义coco数据集训练实例分割模型,帮助你开始使...

CICD联动阿里云容器服务Kubernetes实践之Bamboo篇

本文档以构建一个Java软件项目并部署到阿里云容器服务的Kubernetes集群为例说明如何使用Bamboo在阿里云Kubernetes服务上运行RemoteAgents并在agents上...

Open3D-ML点云语义分割实验【RandLA-Net】

作为点云Open3D-ML实验的一部分,我撰写了文章解释如何使用Tensorflow和PyTorch支持安装此库。为了测试安装,我解释了如何运行一个简单的Python脚本来可视化名为...

清理系统不用第三方工具(系统自带清理软件效果好不?)

清理优化系统一定要借助于优化工具吗?其实,手动优化系统也没有那么神秘,掌握了方法和技巧,系统清理也是一件简单和随心的事。一方面要为每一个可能产生累赘的文件找到清理的方法,另一方面要寻找能够提高工作效率...

【信创】联想开先终端开机不显示grub界面的修改方法

原文链接:【信创】联想开先终端开机不显示grub界面的修改方法...

如意玲珑成熟度再提升,三大发行版支持教程来啦!

前期,我们已分别发布如意玲珑在deepinV23与UOSV20、openEuler24.03发行版的操作指南,本文,我们将为大家详细介绍Ubuntu24.04、Debian12、op...

118种常见的多媒体文件格式(英文简写)

MP4[?mpi?f??]-MPEG-4Part14(MPEG-4第14部分)AVI[e?vi??a?]-AudioVideoInterleave(音视频交错)MOV[m...

密码丢了急上火?码住7种console密码紧急恢复方式!

身为攻城狮的你,...

CSGO丨CS2的cfg指令代码分享(csgo自己的cfg在哪里?config文件位置在哪?)

?...

使用open SSL生成局域网IP地址证书

某些特殊情况下,用户内网访问多可文档管理系统时需要启用SSL传输加密功能,但只有IP,没有域名和证书。这种情况下多可提供了一种免费可行的方式,通过openSSL生成免费证书。此方法生成证书浏览器会提示...

Python中加载配置文件(python怎么加载程序包)

我们在做开发的时候经常要使用配置文件,那么配置文件的加载就需要我们提前考虑,再不使用任何框架的情况下,我们通常会有两种解决办法:完整加载将所有配置信息一次性写入单一配置文件.部分加载将常用配置信息写...

python开发项目,不得不了解的.cfg配置文件

安装软件时,经常会见到后缀为.cfg、.ini的文件,一般我们不用管,只要不删就行。因为这些是程序安装、运行时需要用到的配置文件。但对开发者来说,这种文件是怎么回事就必须搞清了。本文从.cfg文件的创...

瑞芯微RK3568鸿蒙开发板OpenHarmony系统修改cfg文件权限方法

本文适用OpenHarmony开源鸿蒙系统,本次使用的是开源鸿蒙主板,搭载瑞芯微RK3568芯片。深圳触觉智能专注研发生产OpenHarmony开源鸿蒙硬件,包括核心板、开发板、嵌入式主板,工控整机等...

Python9:图像风格迁移-使用阿里的接口

先不多说,直接上结果图。#!/usr/bin/envpython#coding=utf-8importosfromaliyunsdkcore.clientimportAcsClient...

Python带你打造个性化的图片文字识别

我们的目标:从CSV文件读取用户的文件信息,并将文件名称修改为姓名格式的中文名称,进行规范资料整理,从而实现快速对多个文件进行重命名。最终效果:将原来无规律的文件名重命名为以姓名为名称的文件。技术点:...

取消回复欢迎 发表评论:

请填写验证码