被尤雨溪推荐，这款开箱即用的Vue3组件库做对了什么

相信很多开发者都有过这样的想法：因为对某个技术栈或明星开源项目感兴趣，产生了开发拓展方向的新项目的想法与实践，同时也希冀于这个全新的开源项目也能如同别的优质开源项目一样受到关注，只是并非每个项目都能登上热门，获得高额 star 数。

不过，今天马建仓介绍的这款开源项目的开发者，就曾在过去一年里实现了从零到一的华丽逆袭，让我们一起来瞧瞧这究竟是什么宝藏项目。

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，并在今年的 Vue JS Live 上被 Vue 的作者尤雨溪推荐。然而自这个项目诞生的时间不到一年。

从 Varlet 作者的某技术博客上得知，作者是一位专科毕业、在无锡工作的四川前端开发。去年，因所属单位打算开发某个与 Vue3 相关的组件库，机缘巧合下，作者自告奋勇包揽下这个活。然而，公司却因成本、投资回报等原因并不打算提供支持，随后作者搭档两位好友决心继续坚持下去。

这个组件库是基于 Material Design 的设计进行规范的，在此期间作者与合作的小伙伴们共同参考社区成品以及结合国内开发者感兴趣的 api 。对于为何选择 Material，作者在官方文档中这样描述：

在早期的移动端设备中，大色块以及强烈对比色，对显示设备要求很高，同时非线性动画和水波纹对 GPU 有一定要求。 导致 Material 风格并没有在移动端浏览器环境下有很好的体验，更多选择更扁平朴素的风格投入产品。 但随着现代设备和新的 js 框架运行时处理的效率的逐步提升，浏览器有了更多的空闲时间和能力去处理动画效果，Material Design 将会给应用带来更好的体验。

经历了多次的反复推敲之后，组件库隐约有了个雏形。打这时起， Varlet 也正式开源，并采用 MIT 开源许可证。

之后的日子里，Varlet 不仅获得阮一峰老师的推荐，同时也得到了国外开源技术社区的认可，其中 Vite 核心团队的 Antfu 大神也接受了这个组件库的 PR。不久前，在 Vue3 的 2021 年度总结分享会上，尤雨溪大神也推荐了 Varlet 。前段时间，在 Gitee 上开源的 varlet-ui 项目经过评估，也获得了Gitee的推荐，项目地址：gitee.com/varlet/varl…

那么 Varlet 究竟有着怎样的魅力，吸引着这么多大神与优质平台的推广呢？

---

从特性上看

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

如何安装与部署

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')

如何引入？

手动引入

每一个组件都是一个 Vue 插件，并由组件逻辑和样式文件组成，如下方式进行手动引入使用。

import { createApp } from 'vue'
import { Button } from '@varlet/ui'
import '@varlet/ui/es/button/style/index.js'

createApp().use(Button)

自动引入

所有在模板中的组件，都会被 unplugin-vue-components 插件自动扫描，插件会自动引入组件逻辑和样式文件并注册组件。

# 安装插件

# npm
npm i unplugin-vue-components -D

# yarn
yarn add unplugin-vue-components -D

# pnpm
pnpm add unplugin-vue-components -D

Vue Cli

// vue.config.js
const Components = require('unplugin-vue-components/webpack')
const { VarletUIResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [VarletUIResolver()]
      })
    ]
  }
}

Vite

// vite.config.js
import vue from '@vitejs/plugin-vue'
import components from 'unplugin-vue-components/vite'
import { VarletUIResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    components({
      resolvers: [VarletUIResolver()]
    })
  ]
})

注意

完成配置后如下使用即可

<template>
  <var-button>默认按钮</var-button>
</template>

如何切换主题

该项目提供了暗黑模式的主题，暗黑模式的优势在于在弱光环境下具有更高的可读性。

<var-button block @click="toggleTheme">切换主题</var-button>

import dark from '@varlet/ui/es/themes/dark'
import { StyleProvider } from '@varlet/ui'

export default {
  setup() {
    let currentTheme
    
    const toggleTheme = () => {
      currentTheme = currentTheme ? null : dark
      StyleProvider(currentTheme)
    }
    
    return { toggleTheme }
  }
}

注入组件库推荐的文字颜色和背景颜色变量来控制整体颜色

body {
  transition: background-color .25s;
  color: var(--color-text);
  background-color: var(--color-body);
}

样式展示

在线编辑地址

前往下列网址：varlet.gitee.io/varlet-ui/#…

点击界面右上方:

---