《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于 Vue3 的 Material design 风格移动端组件库——varlet-ui。

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验。

特性

• 组件丰富： 提供 50 个高质量通用组件
• 按需引入： 每一个组件都可单独引入，并有着良好的 tree-shaking 优化
• 主题定制： 内置亮色和暗色两种主题，支持组件的样式自定义
• 国际化： 内置国际化 API，内置中文和英文的语言包
• 支持 Typescript： 使用 Typescript 构建，提供良好的组件类型系统
• 服务端渲染： 对服务端渲染支持良好，并对 Nuxt 进行了适配
• 国人开发： 由国人开发，完善的中英文文档和后勤保障
• IDE 支持： 支持在 webstorm，vscode 中的组件语法高亮, 并提供 vscode 插件为开发提升效率
• 组件库快速成型工具： 开源了搭建本组件库的所有工具链，提供快速开发组件库的能力

基础组件

主题色按钮

按钮组件，用于触发操作。

<template>
  <var-space :size="[10, 10]">
    <var-button>默认按钮</var-button>
    <var-button type="primary">主要按钮</var-button>
    <var-button type="info">信息按钮</var-button>
    <var-button type="success">成功按钮</var-button>
    <var-button type="warning">警告按钮</var-button>
    <var-button type="danger">危险按钮</var-button>
  </var-space>
</template>

面包屑

用于分级展示信息。

<template>
  <var-breadcrumbs>
    <var-breadcrumb>首页</var-breadcrumb>
    <var-breadcrumb>一级</var-breadcrumb>
    <var-breadcrumb>二级</var-breadcrumb>
  </var-breadcrumbs>
</template>

主题色链接

链接组件，用于页面跳转。

<template>
  <var-space :size="[10, 10]">
    <var-link>默认链接</var-link>
    <var-link type="primary">主要链接</var-link>
    <var-link type="info">信息链接</var-link>
    <var-link type="success">成功链接</var-link>
    <var-link type="warning">警告链接</var-link>
    <var-link type="danger">危险链接</var-link>
  </var-space>
</template>

Loading 类型

加载组件，用于数据加载时执行动画。

<template>
  <var-space align="center" justify="space-between">
    <var-loading type="circle" />
    <var-loading type="cube" />
    <var-loading type="wave" />
    <var-loading type="rect" />
    <var-loading type="disappear" />
  </var-space>
</template>

纸片

纸片组件，用于显示一些条目，并且支持关闭条目。

<template>
  <var-space>
    <var-chip>默认纸片</var-chip>
    <var-chip type="primary">主要纸片</var-chip>
    <var-chip type="success">成功纸片</var-chip>
    <var-chip type="danger">危险纸片</var-chip>
    <var-chip type="warning">警告纸片</var-chip>
    <var-chip type="info">信息纸片</var-chip>
  </var-space>
</template>

骨架屏

显示一些带过渡效果的占位元素，优化加载过程。

<script setup>
import { ref } from 'vue'

const loading = ref(true)
</script>

<template>
  <var-skeleton :loading="loading">加载的数据</var-skeleton>
</template>

卡片

<template>
  <var-card
    title="本草纲目"
    description="如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~"
  />
</template>

选项卡组

使用 Tabs、Tab 实现选项卡组的切换。使用 TabsItems、TabItem 实现和选项卡组的视图联动。

<script setup>
import { ref } from 'vue'

const active = ref(0)
</script>

<template>
  <var-tabs v-model:active="active">
    <var-tab>选项1</var-tab>
    <var-tab>选项2</var-tab>
    <var-tab>选项3</var-tab>
  </var-tabs>
</template>

安装

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