被尤雨溪/阮一峰等大神推荐的UI组件库

大家好，我是前端实验室的大师兄！

最近大师兄翻到一个VUE3组件库：Varlet。作者是一位专科毕业、来自四川在无锡工作的前端开发者。作为半个老乡，真心为作者点赞。

前言

Varlet 前身本来是该作者所在公司打算开发的组件库。后来公司考虑成本、投资回报等原因不再继续提供支持，但作者联合好友继续完善下去，发展至今已经拥有十多个一起维护的小伙伴。热爱可抵岁月漫长，这可能就是开源的魅力所在。大师兄这里也和大家分享下。

简介

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区的小伙伴开发和维护。

Varlet 不仅获得阮一峰老师的推荐，同时也得到了国内外开源技术社区的认可，其中 Vite 核心团队的 Antfu 大神也接受了这个组件库的 PR。另外，Vue.js 的作者尤雨溪推荐了该项目。

特性

🚀 提供50个高质量通用组件 🚀 组件十分轻量 💪 由国人开发，完善的中英文文档和后勤保障 🛠️ 支持按需引入 🛠️ 支持主题定制 🌍 支持国际化 💡 支持 webstorm，vscode 组件属性高亮 💪 支持 SSR 💡 支持 Typescript 💪 确保90%以上单元测试覆盖率，提供稳定性保证 🛠️ 支持暗黑模式

安装

安装 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、yarn 或 pnpm 安装。

# 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 组件的使用和主流的 UI 组件库一样：支持按需引入、服务端渲染、提供移动端和桌面端适配、支持国际化等。

这对于开发使用者来说上手成本几乎为零。现在一起来看下 Varlet 的组件。

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

上手体验和建议

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

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

如果你的产品在意交互动效的细节，或者要上架谷歌商店的应用，这款本地化的组件值得选择。

关于 Varlet 的介绍就到这里了。想要了解更多内容，请查阅下方的官方地址：

Varlet 地址 https://varlet.gitee.io/varlet-ui/#/zh-CN/index

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。