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

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区建立起来的组件库团队进行维护。

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

安装

CDN

varlet.js 包含组件库的所有样式和逻辑，引入即可。

<div id="app"></div><script src=";></script><script src=";></script><script>  const app = Vue.createApp({    template: '<var-button>按钮</var-button>'  })  app.use(Varlet).mount('#app')</script>

Webpack / Vite

# 通过 npm 或 yarn 或 pnpm 安装# 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')

按需引入

手动引入

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

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

自动引入

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

# 安装插件# npmnpm i unplugin-vue-components -D# yarnyarn add unplugin-vue-components -D# pnpmpnpm add unplugin-vue-components -D

Vue Cli

// vue.config.jsconst Components = require('unplugin-vue-components/webpack')const { VarletUIResolver } = require('unplugin-vue-components/resolvers')module.exports = {  configureWebpack: {    plugins: [      Components({        resolvers: [VarletUIResolver()]      })    ]  }}

Vite

// vite.config.jsimport 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);}

基础组件

Button按钮

Loading加载

Badge徽标

展示组件

Skeleton骨架屏

Progress进度条

Steps步骤条

导航组件

Tabs选项卡

IndexBar索引栏

更多组件大家可自行前往阅读，组件地址：

—END—

开源协议：MIT

开源地址：