关于 Varlet

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

Varlet 官网
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 文档

安装 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 工程化:

# npmnpm i @varlet/ui -S# yarnyarn add @varlet/ui# pnpmpnpm 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 部分组件预览
Varlet 部分组件预览
Varlet 部分组件预览

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

免费开源说明

 

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

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

 

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源